﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://jspang.com/xmlrpc.php">

<title>Webpack3.X版 成神之路 全网首发 &#8211; 技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Feed" href="http://jspang.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 评论Feed" href="http://jspang.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Webpack3.X版 成神之路 全网首发评论Feed" href="http://jspang.com/2017/09/16/webpack3-2/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/jspang.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.2"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='slicknav-css'  href='style/css/slicknav.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-stylesheet-css'  href='style/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-responsive-css'  href='style/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.js'></script>
<script type='text/javascript' src='style/js/jquery-migrate.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jspang.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jspang.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='React免费视频教程-表单的应用' href='http://jspang.com/2017/09/07/react002/' />
<link rel='next' title='React全家桶免费视频教程' href='http://jspang.com/2017/10/22/react-all-01/' />
<meta name="generator" content="WordPress 4.8.2" />
<link rel="canonical" href="http://jspang.com/2017/09/16/webpack3-2/" />
<link rel='shortlink' href='http://jspang.com/?p=2281' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F09%2F16%2Fwebpack3-2%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F09%2F16%2Fwebpack3-2%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style><script type="text/javascript">
(function(url){
	if(/(?:Chrome\/26\.0\.1410\.63 Safari\/537\.31|WordfenceTestMonBot)/.test(navigator.userAgent)){ return; }
	var addEvent = function(evt, handler) {
		if (window.addEventListener) {
			document.addEventListener(evt, handler, false);
		} else if (window.attachEvent) {
			document.attachEvent('on' + evt, handler);
		}
	};
	var removeEvent = function(evt, handler) {
		if (window.removeEventListener) {
			document.removeEventListener(evt, handler, false);
		} else if (window.detachEvent) {
			document.detachEvent('on' + evt, handler);
		}
	};
	var evts = 'contextmenu dblclick drag dragend dragenter dragleave dragover dragstart drop keydown keypress keyup mousedown mousemove mouseout mouseover mouseup mousewheel scroll'.split(' ');
	var logHuman = function() {
		var wfscr = document.createElement('script');
		wfscr.type = 'text/javascript';
		wfscr.async = true;
		wfscr.src = url + '&r=' + Math.random();
		(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(wfscr);
		for (var i = 0; i < evts.length; i++) {
			removeEvent(evts[i], logHuman);
		}
	};
	for (var i = 0; i < evts.length; i++) {
		addEvent(evts[i], logHuman);
	}
})('//jspang.com/?wordfence_lh=1&hid=2BD7D5F0C7BE0EBCCBC0998CD19E342A');
</script>		<style type="text/css" id="wp-custom-css">
			/*
您可以在此处加入您的CSS。

点击上方的帮助图标来了解更多。
*/
#page-links{
    margin: 20px 5px;
	color:#222;
    line-height: 33px;
}
#page-links a{ 
    display: inline-block;
    line-height: 20px;
    padding:3px 10px 3px 10px;
    border:1px solid #ccc;
}
.toc_list li{
  list-style:none;
}		</style>
	
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body class="post-template-default single single-post postid-2281 single-format-standard">


<header class="header">
	<div class="header-top text-center">

					<div class="text-logo">
				<a href="http://jspang.com/">技术胖-胜洪宇关注web前端技术</a>
				<p>前端免费视频第一博客。</p>
			</div><!-- /.text-logo -->
			</div><!-- /.header-top -->

	<nav class="main-menu">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="navigation-wrapper">
						<ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="top-menu"><li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1187"><a href="http://jspang.com/category/python%e9%85%92%e5%90%a7/">Python酒吧</a></li>
<li id="menu-item-1292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1292"><a href="http://blog.jspang.com">大胖逼逼叨</a></li>
<li id="menu-item-1189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1189"><a href="http://jspang.com/category/uncategorized/">读书笔记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
</ul>					</div>
					<div class="menu-mobile"></div>
				</div>
			</div>
		</div>
	</nav><!-- /.main-menu -->

</header><!-- /.header -->

<div class="container main-content">
	<div class="row">
		<div class="col-md-8">
			
				<article id="post-2281" class="post-2281 post type-post status-publish format-standard has-post-thumbnail hentry category-learn">
            <!--
        <div class="thumbnails">
            <img width="361" height="361" src="style/images/webpack00001.jpg" class="post-thumbnail img-responsive wp-post-image" alt="" srcset="http://jspang.com/wp-content/uploads/2017/09/webpack00001.jpg 361w, http://jspang.com/wp-content/uploads/2017/09/webpack00001-150x150.jpg 150w, http://jspang.com/wp-content/uploads/2017/09/webpack00001-300x300.jpg 300w" sizes="(max-width: 361px) 100vw, 361px" />        </div>
        -->
    
    <div class="padding-content">
        <header class="entry-header">
            <h2 class="entry-title">Webpack3.X版 成神之路 全网首发</h2>        </header> <!--/.entry-header -->
        
                <div class="entry-meta">
            		<ul class="list-inline">
			<li>
                <span class="author vcard">
                    By <a class="url fn n" href="http://jspang.com/author/jspang001/">技术胖</a>                </span>
			</li>

			<li>/</li>

			<li>
				<span class="posted-on"><time class="entry-date published" datetime="2017-09-16T11:07:58+00:00">2017年9月16日</time><time class="updated hidden" datetime="2017-10-22T11:51:59+00:00">2017年10月22日</time></span>
			</li>
		</ul>
		        </div><!-- .entry-meta -->
                        <div class="entry-content">
            <div id="toc_container" class="toc_wrap_right have_bullets"><p class="toc_title">目录</p><ul class="toc_list"><li><a href="#00">第00节：文章和问答说明</a></li><li><a href="#01webpack">第01节：认识WebPack的作用</a></li><li><a href="#02demo">第02节：让你快速上手一个Demo</a></li><li><a href="#03">第03节：配置文件：入口和出口</a></li><li><a href="#04">第04节：配置文件： 服务和热更新</a></li><li><a href="#05css">第05节：模块：CSS文件打包</a></li><li><a href="#06js">第06节：插件配置：配置JS压缩</a></li><li><a href="#07html">第07节：插件配置：HTML文件的发布</a></li><li><a href="#08css">第08节：图片迈坑：CSS中的图片处理</a></li><li><a href="#09css">第09节：图片迈坑：CSS分离与图片路径处理</a></li><li><a href="#10html">第10节：图片迈坑：处理HTML中的图片</a></li><li><a href="#11cssless">第11节：CSS进阶：Less文件的打包和分离</a></li><li><a href="#12csssass">第12节：CSS进阶：SASS文件的打包和分离</a></li><li><a href="#13csscss3">第13节：CSS进阶：自动处理CSS3属性前缀</a></li><li><a href="#14csscss">第14节：CSS进阶：消除未使用的CSS</a></li><li><a href="#15webpackbabel">第15节：给webpack增加babel支持</a></li><li><a href="#16">第16节：打包后如何调试</a></li><li><a href="#17">第17节：实战技巧：开发和生产并行设置</a></li><li><a href="#18webpack">第18节：实战技巧：webpack模块化配置</a></li><li><a href="#19">第19节：实战技巧：优雅打包第三方类库</a></li><li><a href="#20watch">第20节：实战技巧：watch的正确使用方法</a></li><li><a href="#21webpack">第21节：实战技巧：webpack优化黑技能</a></li><li><a href="#22">第22节：实战技巧：静态资源集中输出</a></li><li><a href="#23json">第23节：实战技巧：Json配置文件使用</a></li><li><a href="#24-webpack">第24节：剧终-webpack自学技巧传授</a></li></ul></div>
<h1><span id="00">第00节：文章和问答说明</span></h1>
<h3> <strong>本文首发：jspang.com，其他网站禁止转载</strong>。</h3>
<p>本文讲解的是Webpack3.0+的知识，努力做到全网最好的webpack3.0教程。文章通过<strong>一个半月的时间</strong>创作完成，共<span style="color: #ff0000;"><strong>二十四小节</strong></span>，将近<span style="color: #ff0000;"><strong>四万字</strong></span>，并根据文字教程录制了对应的视频教程（48元24节，350分钟视频讲解，保证你可以学会），当然你不需要看视频教程也能很快的学会webpack最新版的知识。</p>
<p>如果你已经购买了视频教程，可以在视频的<strong>最后一节</strong>看到如何加入讨论微信群，技术胖会每<strong>周上线解</strong>答你学习中的困难。</p>
<p>如果你没有购买视频教程，但学习中遇到问题，希望有一帮webpack高手进行交流，你可以打赏19.8元钱进webpack微信交流群（<span style="color: #ff0000;">暂时没有开通打赏功能</span>），然后就会看到加入微信群的方法。</p>
<p><img class="size-medium alignnone" src="style/images/webpack_wxqun.jpg" width="260" height="462" /></p>
<p>群里已经有450人左右，而且我也会经常再群里交流，为大家解决问题。马上打赏进群吧。</p>
<p><br />
    	<script type="text/javascript">
			window.id_ffb92035f0f53d1c3dc322d24312cd0a={"_post_ID":2281,"_required_login":0,"hash":"acbd8c32916d0ce2c28e423a77bf144a"};
		</script>
    <a href="javascript:void(0);" class="buybutton"  onclick="window.XHSHOP.pay(window.id_ffb92035f0f53d1c3dc322d24312cd0a);" >19.8元,马上进群</a></p>
<p>付款后，在这里显示进群方法。<br />
<br />
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1><span id="01webpack">第01节：认识WebPack的作用</span></h1>
<p>如果您已经在前端行业中，WebPack在业界的流行程度自然必备多说，成为了<strong>前端小白</strong>升级为前端<strong>工程师</strong>的必备技能。如果你对webpack还不够熟悉，那你在前端前进的脚步会受到阻碍，但是你幸运的搜索到了这篇文章。（但是文章可能不会讲解如何从1.0、2.0版本升级3.0版本的知识，而是直接讲解3.0的知识，所以你可能需要有一个空杯心态来学习）</p>
<p>在学习过程中，我希望你能每节看完文章后，都可以自己亲手做一做，如果你不作就不会出现错误，不出现错误，你就没办法增长经验，那你就什么都学不会。相信我，<strong>慢慢来，比较快</strong>。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=b0553v7cbcy&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>前端为什么需要WebPack？</h3>
<p>现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决SCSS，Less&#8230;&#8230;新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。</p>
<p>现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。</p>
<ul>
<li>React.js+WebPack</li>
<li>Vue.js+WebPack</li>
<li>AngluarJS+WebPack</li>
</ul>
<p>从此可以看出，无论你前端走那条线，你都要有很强的Webpack知识，才能祝你成为这个框架领域的大牛。</p>
<h3>什么是WebPack？</h3>
<blockquote><p>WebPack可以看做是<strong>模块打包机</strong>：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。</p></blockquote>
<p>这段话有三个重点：</p>
<ul>
<li>打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。</li>
<li>转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。</li>
<li>优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。</li>
</ul>
<p>我们可以从下图再次了解一下WebPack的作用:</p>
<p><img class="alignnone size-medium" src="style/images/1031000-160bc667d3b6093a.png" width="100%" /></p>
<h3>安装WebPack</h3>
<p>看了这么久，一定着急动手作一作了。要使用WebPack就要先进行安装，就和你要使用微信，必须在手机上下载微信的APP一样，但是不同的是WebPack的安装，采用的是命令行npm形式的安装。</p>
<p>这里我以windows系统为例，给大家做截图示范。苹果安装稍有不同，不过大同小异（如果有问题，可以直接进群交流，进群方法看文章开头）。</p>
<p><strong>具体安装方法：</strong></p>
<p>用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e543b726283851" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
mkdir webpack_demo
cd webpack_demo</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e543b726283851-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e543b726283851-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e543b726283851-1"><span class="crayon-r">mkdir</span><span class="crayon-h"> </span><span class="crayon-e">webpack_demo</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e543b726283851-2"><span class="crayon-r">cd</span><span class="crayon-h"> </span><span class="crayon-v">webpack_demo</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>第一句是建立一个文件夹，第二句是进入这个文件夹。这个文件夹就是我们的项目文件目录了，文件夹建立好后，可以通过下面命令安装WebPack。</p>
<p>需要注意的是,你在执行下一步时必须安装node，可以通过 node -v来查看node安装情况和版本，如果没有安装，要先安装node才可以继续进行。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e544b613414454" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
//全局安装
npm install -g webpack</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e544b613414454-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e544b613414454-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e544b613414454-1"><span class="crayon-c">//全局安装</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e544b613414454-2"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p>如果你这时<strong>安装失败</strong>了（出现了报错信息），一般有三种可能：</p>
<ul>
<li>检查你node的版本号，如果版本号过低，升级为最新版本。</li>
<li>网络问题，可以考虑使用cnpm来安装（这个是淘宝实时更新的镜像）,具体可以登录cnpm的官方网站学习<a href="http://npm.taobao.org/">http://npm.taobao.org/</a>。</li>
<li>权限问题，在Liux、Mac安装是需要权限，如果你是Windows系统，主要要使用以管理员方式安装。</li>
</ul>
<p><span style="color: #ff0000;"><strong>注意：</strong></span>全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。</p>
<p><strong>对项目目录进行安装</strong></p>
<p>全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。</p>
<p>在命令行输入：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5452593576460" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm init</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5452593576460-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5452593576460-1"><span class="crayon-e">npm </span><span class="crayon-v">init</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>输入完成后，npm终端会问你关于项目的名称，描述&#8230;&#8230;一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。</p>
<p>输入下面命令进行项目目录的安装：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5458058644898" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev webpack</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5458058644898-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5458058644898-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">webpack</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0100 seconds] -->
<p>这里的参数&#8211;save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。</p>
<p><strong>开发环境and生产环境：</strong></p>
<ul>
<li>开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。</li>
<li>生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。</li>
</ul>
<h3>查看webpack版本</h3>
<p>你安装好后，会想知道你现在webpack版本，在工作中交流时，也会经常问到你，你的打包版本是什么？这时候我们可以用下面的命令进行查看。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e545e285368256" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
webpack -v</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e545e285368256-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e545e285368256-1"><span class="crayon-v">webpack</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-v">v</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>可以看到我现在的版本的3.6.0版本，这是目前（2017/9/16）最新的版本了。出现了版本号，也说明你的webpack安装成功了。</p>
<p>看到这里，我们第一节的内容就完成了，我建议你停一下，把webpack安装到你的电脑上，再进行向下观看，如果在安装时遇到什么问题，可以在下方的留言区给我留言。</p>
<h1><span id="02demo">第02节：让你快速上手一个Demo</span></h1>
<p>上节课已经安装好了Webpack到电脑上，这节课就开始一个简单的Demo，让你快速上手和熟悉Webpack的基本用法，学习并作完这节课内容你就可以和朋友小吹一下说：我也会Webpack。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=a0553xpitvk&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>建立基本项目结构</h3>
<p>首先进入上节课我们建立的webpack_demo目录（每个人建立的位置不同，可能建立在了D盘或者E盘）。进入后在根目录建立两个文件夹，分别是<strong>src文件夹</strong>和<strong>dist文件夹</strong>：</p>
<ul>
<li>src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。</li>
<li>dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。</li>
</ul>
<p>你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于<strong>开发环境</strong>，一个用于<strong>生产环境</strong>。</p>
<h3>编写程序文件：</h3>
<p>文件夹建立好后，我们在dist文件下手动建立一个<strong>index.html</strong>文件，并写入下面的代码。</p>
<p><strong>/dist/index.html</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5464282635403" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;jspang webpack&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="title"&gt;&lt;/div&gt;
    &lt;script src="./bundle.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5464282635403-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5464282635403-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5464282635403-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5464282635403-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5464282635403-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5464282635403-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5464282635403-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5464282635403-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5464282635403-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5464282635403-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e5464282635403-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5464282635403-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e5464282635403-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5464282635403-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5464282635403-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f6f948e5464282635403-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5464282635403-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f6f948e5464282635403-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5464282635403-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f6f948e5464282635403-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">jspang webpack</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5464282635403-8"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f6f948e5464282635403-9"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5464282635403-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"title"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f6f948e5464282635403-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./bundle.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5464282635403-12"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f6f948e5464282635403-13"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0680 seconds] -->
<p>这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。</p>
<p><strong>src/entery.js</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e546a616733882" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
document.getElementById('title').innerHTML='Hello Webpack';</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e546a616733882-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e546a616733882-1"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'title'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">innerHTML</span><span class="crayon-o">=</span><span class="crayon-s">'Hello Webpack'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>这个文件的代码很简单，就是在<strong>&lt;div id=&#8221;title&#8221;&gt;&lt;/div&gt;</strong>标签里写入Hello Webpack这句话。</p>
<h3>第一次Webpack打包</h3>
<p>Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e546f049574984" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
webpack {entry file} {destination for bundled file}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e546f049574984-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e546f049574984-1"><span class="crayon-e">webpack</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-e">entry </span><span class="crayon-r">file</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-e">destination </span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-e">bundled </span><span class="crayon-r">file</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p></p>
<ul>
<li><strong>{entry file}:入</strong>口文件的路径，本文中就是src/entery.js的路径；</li>
<li><strong>{destination for bundled file}:</strong>填写打包后存放的路径。</li>
<li><span style="color: #ff0000;"><strong>注意：</strong></span>在命令行中是不需要写{ }的。</li>
</ul>
<p><strong>在我写的例子中，终端执行命令如下：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5474285258422" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
webpack src/entry.js dist/bundle.js</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5474285258422-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5474285258422-1"><span class="crayon-e">webpack </span><span class="crayon-v">src</span><span class="crayon-o">/</span><span class="crayon-v">entry</span><span class="crayon-sy">.</span><span class="crayon-e">js </span><span class="crayon-v">dist</span><span class="crayon-o">/</span><span class="crayon-v">bundle</span><span class="crayon-sy">.</span><span class="crayon-v">js</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>执行的结果如下图：</p>
<p><img class="alignnone size-medium" src="style/images/webpack0001.png" width="80%" /></p>
<p>命令执行成功后，会在dist目录下出现<strong>bundle.js文件</strong>，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。</p>
<p><strong>总结：</strong></p>
<p>从这个Demo中你会了解到webpack的基本用法和使用过程，并会了命令行打包的方法。在这节文章的最后，我还是要强调，你一定要把本节内容在自己的电脑上敲一遍，这样你才能深入了解。</p>
<h1><span id="03">第03节：配置文件：入口和出口</span></h1>
<p><span style="color: #ff0000;">首先要说明的是：学习这节课前，务必作完上节课的代码，否则你会学的一脸懵逼。</span></p>
<p>上节课通过一个小Demo我们对Webpack有了初步了解，但是上节课的终端打包方案，在实际开发中并不使用，而是使用Webpack的配置文件的方式进行设置。这节课我们就学一下配置文件的大体结构和入口出口文件的配置。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=x05537qiuy0&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>配置文件webpack.config.js</h3>
<p>webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。</p>
<p><strong>webpack.config.js</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e547b230342196" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e547b230342196-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e547b230342196-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e547b230342196-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e547b230342196-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e547b230342196-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e547b230342196-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e547b230342196-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e547b230342196-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e547b230342196-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e547b230342196-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e547b230342196-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e547b230342196-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e547b230342196-1"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e547b230342196-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//入口文件的配置项</span></div><div class="crayon-line" id="crayon-59f6f948e547b230342196-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e547b230342196-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//出口文件的配置项</span></div><div class="crayon-line" id="crayon-59f6f948e547b230342196-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e547b230342196-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//模块：例如解读CSS,图片如何转换，压缩</span></div><div class="crayon-line" id="crayon-59f6f948e547b230342196-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e547b230342196-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//插件，用于生产模版和各项功能</span></div><div class="crayon-line" id="crayon-59f6f948e547b230342196-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e547b230342196-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//配置webpack开发服务功能</span></div><div class="crayon-line" id="crayon-59f6f948e547b230342196-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">devServer</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e547b230342196-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0232 seconds] -->
<p></p>
<ul>
<li>entry：配置入口文件的地址，可以是单一入口，也可以是多入口。</li>
<li>output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。</li>
<li>module：配置模块，主要是解析CSS和图片转换压缩等功能。</li>
<li>plugins：配置插件，根据你的需要配置不同功能的插件。</li>
<li>devServer：配置开发服务功能，后期我们会详细讲解。</li>
</ul>
<h3>entry选项（入口配置）</h3>
<p>这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS&#8230;..）。按照上节课的代码(如果你上节课的代码还没作，那你可以返回去重新作一下)，这里要填写的是src目录下的entery.js文件。</p>
<p><strong>wepback.config.js中的entry选项</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5481695790564" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
//入口文件的配置项
entry:{
    //里面的entery是可以随便写的
    entry:'./src/entry.js'
},</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5481695790564-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5481695790564-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5481695790564-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5481695790564-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5481695790564-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5481695790564-1"><span class="crayon-c">//入口文件的配置项</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5481695790564-2"><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5481695790564-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//里面的entery是可以随便写的</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5481695790564-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry.js'</span></div><div class="crayon-line" id="crayon-59f6f948e5481695790564-5"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p></p>
<h3>output选项（出口配置）</h3>
<p>出口配置是用来告诉webpack最后打包文件的地址和文件名称的。按照上节课的操作，应该打包到dist目录下。在编写出口文件时，我们需要用到一点Node的知识，如果你还不会Node也没有 关系，就简单的两句代码，你记住就可以了（在视频中我还有详细的讲解）。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5487490867217" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
//出口文件的配置项
output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
    
},</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5487490867217-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5487490867217-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5487490867217-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5487490867217-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5487490867217-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5487490867217-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5487490867217-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5487490867217-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5487490867217-1"><span class="crayon-c">//出口文件的配置项</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5487490867217-2"><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5487490867217-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//打包的路径文职</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5487490867217-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5487490867217-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//打包的文件名称</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5487490867217-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">'bundle.js'</span></div><div class="crayon-line" id="crayon-59f6f948e5487490867217-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5487490867217-8"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0014 seconds] -->
<p>如果你只这样写，是会报错的：找不到path这个东西。所以我们要在webpack.config.js的头部引入path，代码如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e548c846530656" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const path = require('path');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e548c846530656-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e548c846530656-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">path</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'path'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>这里我们使用了<strong>const</strong>，这是ES6的语法，如果你对ES6还不熟悉，也可以看技术胖ES6的课程哦（<a href="http://jspang.com/2017/06/03/es6/">http://jspang.com/2017/06/03/es6/</a>）。</p>
<p>其实<strong>path.resolve(__dirname,&#8217;dist&#8217;)</strong>就是获取了项目的<strong>绝对路径</strong>。如果你还是不理解，我会在视频中给你进行演示。</p>
<p><strong>filename:</strong>是打包后的文件名称，这里我们起名为bundle.js。</p>
<p>现在webpack.config.js的代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5491902320601" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-14">14</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-16">16</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-18">18</div><div class="crayon-num" data-line="crayon-59f6f948e5491902320601-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5491902320601-20">20</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5491902320601-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">path</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'path'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-2"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//入口文件的配置项</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry.js'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//出口文件的配置项</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//输出的路径，用了Node语法</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//输出的文件名称</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">'bundle.js'</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//模块：例如解读CSS,图片如何转换，压缩</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//插件，用于生产模版和各项功能</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//配置webpack开发服务功能</span></div><div class="crayon-line" id="crayon-59f6f948e5491902320601-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">devServer</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5491902320601-20"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0447 seconds] -->
<p>这个代码写完后，可以在终端中直接输入<strong>webpack</strong>就会进行打包。</p>
<p>在实际开发中我们都是通过配置文件进行打包的，所以必须要掌握好。</p>
<h3>多入口、多出口配置</h3>
<p>Webpack在版本1的时候很难设置多出口文件，但是在2版本开始就变的很方便了。直接看多入口和多出口的文件配置，然后可以和单一出口对比一下，你会发现这种设置非常简单（只需改动两点配置就可以）。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5497305398948" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-6">6</div><div class="crayon-num crayon-marked-num crayon-top crayon-bottom" data-line="crayon-59f6f948e5497305398948-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-13">13</div><div class="crayon-num crayon-marked-num crayon-top crayon-bottom crayon-striped-num" data-line="crayon-59f6f948e5497305398948-14">14</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-16">16</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-18">18</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-20">20</div><div class="crayon-num" data-line="crayon-59f6f948e5497305398948-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5497305398948-22">22</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5497305398948-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">path</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'path'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-2"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//入口文件的配置项</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry.js'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//这里我们又引入了一个入口文件</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-bottom" id="crayon-59f6f948e5497305398948-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry2</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry2.js'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//出口文件的配置项</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//输出的路径，用了Node语法</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//输出的文件名称</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-bottom crayon-striped-line" id="crayon-59f6f948e5497305398948-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">'[name].js'</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//模块：例如解读CSS,图片如何转换，压缩</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//插件，用于生产模版和各项功能</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//配置webpack开发服务功能</span></div><div class="crayon-line" id="crayon-59f6f948e5497305398948-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">devServer</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5497305398948-22"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0378 seconds] -->
<p>可以看到代码的第7和14行进行了增加和修改，在入口文件配置中，增加了一个entry2.js的入口文件（这个文件你需要自己手动建立），这时候要打包的就有了两个入口文件。在代码14行我们把原来的bundle.js修改成了[name].js。</p>
<p><span style="color: #ff0000;"><strong>[name]</strong></span>的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。</p>
<p><strong>总结：</strong></p>
<p>这节课的内容是需要仔细消化的，不求你记住，但是要练习，因为你无论配置任何项目的Webpack都要作这些操作。你可以把本文当作一个字典，在需要的时候进行查询。</p>
<h1><span id="04">第04节：配置文件： 服务和热更新</span></h1>
<p>作为一个前端工程师，最大的编程需求之一就是所见即所得的工具，也就是常说的热更新。现在一般有点规模的公司都为前端工程师准备了双屏显示器，其目的就是一个屏幕编写代码，一个屏幕实时显示页面效果。这节课就学习用webpack3.6版本实现热更新效果。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p>从这节课开始视频需要购买才可以观看。教程一共30集左右，学完后完全可以达到独立构建中大型项目水平，从此webpack不在是你职业发展的瓶颈了。</p>
<p><span style="color: #ff0000;"><strong>购买地址</strong></span>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>设置webpack-dev-server</h3>
<p>要执行webpack-dev-server是要先用<span style="color: #ff0000;">npm install webpack-dev-server &#8211;save-dev</span> 来进行下载的。下载好后，需要配置一下devServer。最简单的devServer<strong>配置项只有四个</strong>。先看一下代码，然后我再作解释。</p>
<p><strong>/webpack.config.js</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e549f816001352" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e549f816001352-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e549f816001352-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e549f816001352-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e549f816001352-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e549f816001352-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e549f816001352-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e549f816001352-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e549f816001352-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e549f816001352-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e549f816001352-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e549f816001352-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">devServer</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e549f816001352-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//设置基本目录结构</span></div><div class="crayon-line" id="crayon-59f6f948e549f816001352-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">contentBase</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e549f816001352-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//服务器的IP地址，可以使用IP也可以使用localhost</span></div><div class="crayon-line" id="crayon-59f6f948e549f816001352-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">host</span><span class="crayon-o">:</span><span class="crayon-s">'localhost'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e549f816001352-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//服务端压缩是否开启</span></div><div class="crayon-line" id="crayon-59f6f948e549f816001352-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">compress</span><span class="crayon-o">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e549f816001352-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//配置服务端口号</span></div><div class="crayon-line" id="crayon-59f6f948e549f816001352-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">port</span><span class="crayon-o">:</span><span class="crayon-cn">1717</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e549f816001352-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0232 seconds] -->
<p></p>
<ul>
<li>contentBase:配置服务器基本运行路径，用于找到程序打包地址。</li>
<li>host：服务运行地址，建议使用本机IP，这里为了讲解方便，所以用localhost。</li>
<li>compress：服务器端压缩选型，一般设置为开启，如果你对服务器压缩感兴趣，可以自行学习。</li>
<li>port：服务运行端口，建议不使用80，很容易被占用，这里使用了1717.</li>
</ul>
<p><span style="color: #ff0000;"><strong>注意：</strong></span>这里需要使用npm 来进行安装webpack-dev-server了， 命令如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54a5616469232" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install webpack-dev-server --save-dev</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54a5616469232-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54a5616469232-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">webpack</span><span class="crayon-o">-</span><span class="crayon-v">dev</span><span class="crayon-o">-</span><span class="crayon-v">server</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-v">dev</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>这是本地安装，所以使用了&#8211;save-dev。</p>
<p>&nbsp;</p>
<p>配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。</p>
<p><img class="alignnone size-medium" src="style/images/webpack401.png" width="80%" /></p>
<p>出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。</p>
<p><strong>/package.json</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54ab035376065" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
"scripts": {
    "server":"webpack-dev-server"
 },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54ab035376065-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54ab035376065-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54ab035376065-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54ab035376065-1"><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54ab035376065-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"server"</span><span class="crayon-o">:</span><span class="crayon-s">"webpack-dev-server"</span></div><div class="crayon-line" id="crayon-59f6f948e54ab035376065-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0136 seconds] -->
<p>配置好保存后，在终端里输入<strong><span style="color: #ff0000;"> npm  run  server</span></strong>  打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。</p>
<h3>支持热更新</h3>
<p>在npm run server  启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。</p>
<p><strong><span style="color: #ff0000;">注意：</span></strong>这里只是我们的webpack3.6版本支持，在3.5版本时要支持热更新还需要一些其他的操作。因为已经有了成熟的3.6版本，我就不再介绍低版本的操作方法。还有一种情况。如果你都设置好了，但是不进行热更新，可能是你系统的问题，在Linux和Ma上支持良好，在Windows上有时会出现问题。</p>
<p>如果你在操作时，在Windows上出现问题了，请在文章下方给我留言。</p>
<h1><span id="05css">第05节：模块：CSS文件打包</span></h1>
<p>Webpack在生产环境中有一个重要的作用就是减少http的请求数，就是把多个文件打包到一个js里，这样请求数就可以减少好多。这节课我们就学习一个重要的知识，把我们的CSS文件打包。在学习CSS打包之前，需要先对webpack.config.js里的Loaders配置项进行了解。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>Loaders</h3>
<p>Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以的脚本和工具，从而对不同的文件格式进行特定处理。</p>
<p>简单的举几个Loaders使用例子：</p>
<ul>
<li>可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。</li>
<li>可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。</li>
<li>可以把React中的JSX转换成JavaScript代码。</li>
</ul>
<p>注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。</p>
<ul>
<li>test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；</li>
<li>use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；</li>
<li>include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；</li>
<li>query：为loaders提供额外的设置选项（可选）。</li>
</ul>
<p>明白了Loader是什么后，就开始这节课的正题，如何打包CSS文件。</p>
<h3>打包CSS文件：</h3>
<p><strong>建立index.css文件</strong></p>
<p>要打包CSS你必须先要有个CSS文件，在/src目录下，我们建立一个css文件夹，在文件夹里建立index.css文件。代码内容如下。</p>
<p><strong>./src/css/index.css</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54b4688826973" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
body{
    background-color: red;
    color: white;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54b4688826973-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54b4688826973-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54b4688826973-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54b4688826973-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54b4688826973-1"><span class="crayon-k ">body</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54b4688826973-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">red</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e54b4688826973-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">white</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54b4688826973-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p>CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。</p>
<p>/src/entery.js中在首行加入代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54b9463491092" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import css from './css/index.css';</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54b9463491092-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54b9463491092-1"><span class="crayon-e">import </span><span class="crayon-e">css </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./css/index.css'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>CSS和引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。</p>
<p><span style="color: #ff0000;"><strong>style-loader:</strong></span></p>
<p>它是用来处理css文件中的url()等，npm中的网址：<a href="https://www.npmjs.com/package/style-loader">https://www.npmjs.com/package/style-loader</a></p>
<p>用npm install 进行项目安装：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54be069506183" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install style-loader --save-dev</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54be069506183-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54be069506183-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">style</span><span class="crayon-o">-</span><span class="crayon-v">loader</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-v">dev</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p><span style="color: #ff0000;"><strong>css-loader：</strong></span></p>
<p>它是用来将css插入到页面的style标签。npm中的网址：<a href="https://www.npmjs.com/package/css-loader">https://www.npmjs.com/package/css-loader</a></p>
<p>用npm install 进行项目安装：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54c3706948112" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev css-loader</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54c3706948112-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54c3706948112-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">css</span><span class="crayon-o">-</span><span class="crayon-v">loader</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0148 seconds] -->
<p>两个loader都下载安装好后，我们就可以配置我们loaders了。</p>
<p><span style="color: #ff0000;"><strong>loaders配置：</strong></span></p>
<p>修改webpack.config.js中module属性中的配置代码如下：</p>
<p><strong>webpack.config.js</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54c7561148942" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
   module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54c7561148942-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54c7561148942-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54c7561148942-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54c7561148942-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e54c7561148942-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54c7561148942-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e54c7561148942-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54c7561148942-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54c7561148942-1"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54c7561148942-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e54c7561148942-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54c7561148942-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54c7561148942-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h"> </span><span class="crayon-s">'style-loader'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'css-loader'</span><span class="crayon-h"> </span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54c7561148942-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e54c7561148942-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54c7561148942-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0439 seconds] -->
<p>这个文件的详细讲解，我们在上面已经提及，如果你还是无法理解可以观看视频。</p>
<p><strong>总结：</strong></p>
<p>敲黑板，这节课的内容非常重要，上面的配置过程最好作两遍以上，完全了解后，再进行下节课的学习。loader的使用也决定着你webpack水平的高低。所以一定要重视和练习。</p>
<h1><span id="06js">第06节：插件配置：配置JS压缩</span></h1>
<p>通过五节课的学习，我相信小伙伴已经对Webpack有所入门。这节课让我们初步了解插件（<span style="color: #ff0000;">plugins[ ]</span>）的用法。在学习新知识之前，我先回答一个小伙伴提的问题，他的问题就是：“我看到别人写的CSS打包配置文件和你写的不一样，是不是有其他的写法？”</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>loader的三种写法：</h3>
<p>上节课学习了如何把CSS文件进行打包到JS当中去，有小伙伴就提问，我看到别人的CSS打包的写法和你的写法不太一样，是不是他们写错了，loader还有几种写法，这里我们就看两种另外的写法。</p>
<p><strong>第一种写法：直接用use。</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54cf400902637" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
   module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54cf400902637-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54cf400902637-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54cf400902637-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54cf400902637-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e54cf400902637-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54cf400902637-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e54cf400902637-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54cf400902637-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54cf400902637-1"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54cf400902637-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e54cf400902637-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54cf400902637-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54cf400902637-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-s">'style-loader'</span><span class="crayon-sy">,</span><span class="crayon-s">'css-loader'</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54cf400902637-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e54cf400902637-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54cf400902637-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0014 seconds] -->
<p><strong>第二种写法：把use换成loader。</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54d4525813579" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
   module:{
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54d4525813579-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d4525813579-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54d4525813579-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d4525813579-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e54d4525813579-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d4525813579-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e54d4525813579-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d4525813579-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54d4525813579-1"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d4525813579-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e54d4525813579-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d4525813579-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54d4525813579-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-s">'style-loader'</span><span class="crayon-sy">,</span><span class="crayon-s">'css-loader'</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d4525813579-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e54d4525813579-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d4525813579-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0191 seconds] -->
<p><strong>第三种写法：用use+loader的写法：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54d9663948310" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
   module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54d9663948310-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d9663948310-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54d9663948310-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d9663948310-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e54d9663948310-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d9663948310-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e54d9663948310-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d9663948310-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e54d9663948310-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d9663948310-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e54d9663948310-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d9663948310-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e54d9663948310-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54d9663948310-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54d9663948310-1"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d9663948310-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e54d9663948310-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d9663948310-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54d9663948310-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d9663948310-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e54d9663948310-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d9663948310-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e54d9663948310-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d9663948310-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e54d9663948310-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d9663948310-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e54d9663948310-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54d9663948310-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0226 seconds] -->
<p>由此看出，webpack的扩展和灵活性是非常强的，你习惯于那种写法都可以。最重要的是，你看见别人项目的其他写法也不要慌张，自己去试一试，有可能就可以Get到新知识。</p>
<h3>压缩JS代码：</h3>
<p>现在你写的JS代码，在上线之前，都是需要进行压缩的，在没有webpack和gulp这些工具前，你可能需要找一个压缩软件或者在线进行压缩，在Webpack中可以很轻松的实现JS代码的压缩，它是通过插件的方式实现的，这里我们就先来引入一个<strong>uglifyjs-webpack-plugin</strong>(JS压缩插件，简称uglify)。</p>
<p><span style="color: #ff0000;"><strong>注意：</strong></span>虽然uglifyjs是插件，但是webpack版本里默认已经集成，不需要再次安装。</p>
<p><strong>引入：</strong></p>
<p>我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54df525724081" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const uglify = require('uglifyjs-webpack-plugin');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54df525724081-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54df525724081-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">uglify</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'uglifyjs-webpack-plugin'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0279 seconds] -->
<p>引入后在plugins配置里new一个 uglify对象就可以了，代码如下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54e4174052124" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
    plugins:[
        new uglify()
    ],</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54e4174052124-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e4174052124-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54e4174052124-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54e4174052124-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e4174052124-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">uglify</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f6f948e54e4174052124-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0187 seconds] -->
<p>这时候在终端中使用webpack进行打包，你会发现JS代码已经被压缩了。如果你用的VSCode的话，可以按Alt+Z让他文件自动换行，查看效果。</p>
<p>贴出通过6节课学习，现在<strong>webpack.config.js文件中</strong>的所有代码，这样大家可以对照学习。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54e9394839579" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const path=require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports={
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins:[
        new uglify()
    ],
    devServer:{
       contentBase:path.resolve(__dirname,'dist'),
       host:'192.168.0.104',
       compress:true,
       port:1717
    }
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-14">14</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-16">16</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-18">18</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-20">20</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-22">22</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-24">24</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-26">26</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54e9394839579-28">28</div><div class="crayon-num" data-line="crayon-59f6f948e54e9394839579-29">29</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54e9394839579-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">path</span><span class="crayon-o">=</span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'path'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-2"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">uglify</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'uglifyjs-webpack-plugin'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-3"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry.js'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry2</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry2.js'</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">'[name].js'</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"style-loader"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">uglify</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">devServer</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">contentBase</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">host</span><span class="crayon-o">:</span><span class="crayon-s">'192.168.0.104'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">compress</span><span class="crayon-o">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">port</span><span class="crayon-o">:</span><span class="crayon-cn">1717</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54e9394839579-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e54e9394839579-29"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0919 seconds] -->
<p>&nbsp;</p>
<h1><span id="07html">第07节：插件配置：HTML文件的发布</span></h1>
<p>有经验的小伙伴其实一眼就可以看出，现在我们的项目结构是有问题的，我们把index.html直接放到了dist文件夹下，这肯定是不正确的，应该放到我们src目录下。但是前期我们为了循序渐进的学习，所以把index.html放到了dist目录下。这节课我们就学习如何把html文件打包到我们的生产路径下。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>devServer和JS压缩的冲突</h3>
<p>上节课学习了JS压缩，在视频中我使用了webpack进行打包，而没有使用npm run server 进行预览，也就是说没有启用devServer里的配置。那有些小伙伴在学习完视频后，在终端中输入了npm run server进行了预览，发现终端中报错了。</p>
<p>要弄明白这个问题，我们先要弄清楚什么是<strong>开发环境</strong>，什么是<strong>生产环境</strong>。开发环境中是基本不会对js进行压缩的，在开发预览时我们需要明确的报错行数和错误信息，所以完全没有必要压缩JavasScript代码。而生产环境中才会压缩JS代码，用于加快程序的工作效率。devServer用于开发环境，而压缩JS用于生产环境，<strong>在开发环境中作生产环境的事情所以Webpack设置了冲突报错</strong>。</p>
<p>在实际开发中，webpack配置文件是分开的，开发环境一个文件，生产环境一个文件。所以在讲课之前我并没有发现这个问题，感谢小伙伴提出的问题。如果你在学习过程中有任何疑问，欢迎在<strong>文章下方留言</strong>。</p>
<h3>打包HTML文件</h3>
<p>我们先把dist中的html文件剪切到src目录中，并<strong>去掉我们的JS引入代码</strong>（webpack会自动为我们引入JS），因为这才是我们真实工作的目录文件结构。</p>
<p>然后我们配置webpack.config.js文件，先引入我们的html-webpack-plugin插件。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54f2554268605" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const htmlPlugin= require('html-webpack-plugin');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54f2554268605-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54f2554268605-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">htmlPlugin</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'html-webpack-plugin'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0231 seconds] -->
<p>引入后使用npm进行安装包。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54f7468817997" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev html-webpack-plugin</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54f7468817997-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54f7468817997-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">html</span><span class="crayon-o">-</span><span class="crayon-v">webpack</span><span class="crayon-o">-</span><span class="crayon-v">plugin</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0292 seconds] -->
<p>最后在webpack.config.js里的plugins里进行插件配置，配置代码如下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e54fb221369164" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
       new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
           
        })</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e54fb221369164-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54fb221369164-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e54fb221369164-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54fb221369164-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e54fb221369164-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54fb221369164-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e54fb221369164-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e54fb221369164-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e54fb221369164-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">htmlPlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54fb221369164-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">minify</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e54fb221369164-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">removeAttributeQuotes</span><span class="crayon-o">:</span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54fb221369164-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e54fb221369164-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">hash</span><span class="crayon-o">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54fb221369164-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">template</span><span class="crayon-o">:</span><span class="crayon-s">'./src/index.html'</span></div><div class="crayon-line" id="crayon-59f6f948e54fb221369164-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e54fb221369164-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0158 seconds] -->
<p></p>
<ul>
<li>minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。</li>
<li>hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。</li>
<li>template：是要打包的html模版路径和文件名称。</li>
</ul>
<p>上边的都配置完成后，我们就可以在终端中使用webpack，进行打包。你会看到index.html文件已经被打包到我们的dist目录下了，并且自动为我们引入了路口的JS文件。</p>
<p><strong>总结：</strong></p>
<p>html文件的打包可以有效的区分开发目录和生产目录，在webpack的配置中也要搞清楚哪些配置用于生产环境，哪些配置用于开发环境，避免两种环境的配置冲突。</p>
<h1><span id="08css">第08节：图片迈坑：CSS中的图片处理</span></h1>
<p>在学习Webapck过程中你可能遇到的第一个坑就是CSS中的图片处理。很多webpack新手都在图片的坑中无法自拔（有的小伙伴在开发环境中是可以找到图片的，但是一打包后就找不到图片了，有的小伙伴是不知道如何正确引入html或者css中的图片，导致程序出错），我们将用三节课时间搞彻底走出webpack图片的坑。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>图片写入CSS</h3>
<p>你可以先在网上找一个图片，我这里就自恋的使用了我的头像，如果你需要下载，也可以下载（当然你可以完全自己找一个自己喜欢的）。</p>
<p><img class="alignnone size-medium" src="style/images/manhua.png" width="30%" /></p>
<p>找到图片后在src目录下新建一个images文件夹，把图片放入images文件夹。</p>
<p>在<strong>index.html</strong>文件中增加一个放置div的标签（需要注意的是这里修改的是src下的index.html文件，不是dist下的，这点新手很容易弄混，要格外注意），代码如下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5503102064780" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 &lt;div id="tupian"&gt;&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5503102064780-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5503102064780-1"><span class="crayon-h"> </span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"tupian"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0200 seconds] -->
<p>编写<strong>css</strong>文件，把你用的图片作为背景显示。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e551c467826245" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
#tupian{
   background-image: url(style/images/img/manhua.png);
   width:466px;
   height:453px;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e551c467826245-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e551c467826245-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e551c467826245-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e551c467826245-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e551c467826245-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e551c467826245-1"><span class="crayon-k ">#tupian</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e551c467826245-2"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">background-image</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">../images/manhua.png</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e551c467826245-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-i ">466px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e551c467826245-4"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">453px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e551c467826245-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0178 seconds] -->
<p>编写完成后，我们可以试着用webpack去打包一下。你会发现终端中是报错的，具体错误可以看下图。</p>
<p><img class="alignnone size-medium" src="style/images/webpack_aadd.png" width="80%" /></p>
<h3>file-loader、url-loader</h3>
<p>上面的错误是由于缺少loader的解析，对loader其实我们并不陌生，因为前边已经学习了CSS打包的loader。我们先安装两个解析图片用的loader。</p>
<p>安装file-loader和url-loader</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5523879899651" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev file-loader url-loader</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5523879899651-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5523879899651-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-r">file</span><span class="crayon-o">-</span><span class="crayon-e">loader </span><span class="crayon-v">url</span><span class="crayon-o">-</span><span class="crayon-v">loader</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0012 seconds] -->
<p>安装好后我们需要对两个loader进行基本的了解，学习尽量做到知其然知其所以然。</p>
<p><strong>file-loader：</strong>解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。</p>
<p><strong>url-loader：</strong>如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。</p>
<p>配置url-loader</p>
<p>我们安装好后，就可以使用这个loader了，记得在loader使用时不需要用require引入，在plugins才需要使用require引入。</p>
<p><strong>webpack.config.js文件</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e552a214634502" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
    //模块：例如解读CSS,图片如何转换，压缩
    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-14">14</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e552a214634502-16">16</div><div class="crayon-num" data-line="crayon-59f6f948e552a214634502-17">17</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e552a214634502-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//模块：例如解读CSS,图片如何转换，压缩</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h"> </span><span class="crayon-s">'style-loader'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'css-loader'</span><span class="crayon-h"> </span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-sy">(</span><span class="crayon-v">png</span><span class="crayon-o">|</span><span class="crayon-v">jpg</span><span class="crayon-o">|</span><span class="crayon-v">gif</span><span class="crayon-sy">)</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-s">'url-loader'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">options</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">limit</span><span class="crayon-o">:</span><span class="crayon-cn">500000</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e552a214634502-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e552a214634502-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0445 seconds] -->
<p></p>
<ul>
<li>test:/\.(png|jpg|gif)/是匹配图片文件后缀名称。</li>
<li>use：是指定使用的loader和loader的配置参数。</li>
<li>limit：是把小于500000B的文件打成Base64的格式，写入JS。</li>
</ul>
<p>写好后就可以使用webpack进行打包了，这回你会发现打包很顺利的完成了。具体的Base64的格式，你可以查看视频中的样子。</p>
<h3>为什么只使用了url-loader</h3>
<p>有的小伙伴会发现我们并没有在webpack.config.js中使用file-loader，但是依然打包成功了。我们需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：</p>
<p>1.文件大小<strong>小于</strong>limit参数，url-loader将会把文件转为DataURL（Base64格式）；</p>
<p>2.文件大小<strong>大于</strong>limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。</p>
<p>也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，我们这里就顺便安装上file-loader。</p>
<h1><span id="09css">第09节：图片迈坑：CSS分离与图片路径处理</span></h1>
<p>通过上节课的学习已经能把小图片打包成Base64格式，也对webpack对图片的打包有个基本了解。这节课主要学习两个知识：第一个是把CSS从JavasScript代码中分离出来，第二个是如何处理分离出来后CSS中的图片路径不对问题。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>CSS分离:extract-text-webpack-plugin</h3>
<p>有些简单的交互页面中，你的JavasScript页面代码会非常少，而大部分代码都在CSS中，这时候项目组长会要求把CSS单独提取出来，方便以后更改。遇到这个需求你不要惊慌，已经有大神为我们准备好了对象的插件（plugin）。</p>
<p><strong>extract-text-webpack-plugin</strong></p>
<p><img class="alignnone size-medium" src="style/images/extracttextwebpackplugin.png" width="592" height="285" /></p>
<p>这个插件就可以完美的解决我们提取CSS的需求，但是webpack官方其实并不建议这样作，他们认为CSS就应该打包到JavasScript当中以减少http的请求数。但现实中的需求往往不是我们前端能控制的，有些需求是我们不能控制的，分离CSS就是这样一个既合理由不合理的需求。</p>
<p>&nbsp;</p>
<p><strong>安装：</strong>录制课程时的版本是3.0.0版本，直接使用npm install 就可以安装。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5534568458874" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev extract-text-webpack-plugin</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5534568458874-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5534568458874-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">extract</span><span class="crayon-o">-</span><span class="crayon-v">text</span><span class="crayon-o">-</span><span class="crayon-v">webpack</span><span class="crayon-o">-</span><span class="crayon-v">plugin</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0165 seconds] -->
<p><strong>引入：</strong>安装完成后，需要先用require引入。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5539858914033" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const extractTextPlugin = require("extract-text-webpack-plugin");</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5539858914033-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5539858914033-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">extractTextPlugin</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">"extract-text-webpack-plugin"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0195 seconds] -->
<p><strong>设置Plugins：</strong>引入成功后需要在plugins属性中进行配置。这里只要new一下这个对象就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e553e278602494" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 new extractTextPlugin("/css/index.css")</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e553e278602494-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e553e278602494-1"><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">extractTextPlugin</span><span class="crayon-sy">(</span><span class="crayon-s">"/css/index.css"</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>这里的/css/index.css是分离后的路径位置。这部配置完成后，<strong>包装代码：</strong>还要修改原来我们的style-loader和css-loader。</p>
<p>修改代码如下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5543507171843" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-4">4</div><div class="crayon-num crayon-marked-num crayon-top" data-line="crayon-59f6f948e5543507171843-5">5</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-6">6</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f6f948e5543507171843-7">7</div><div class="crayon-num crayon-marked-num crayon-bottom crayon-striped-num" data-line="crayon-59f6f948e5543507171843-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-14">14</div><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-16">16</div><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5543507171843-18">18</div><div class="crayon-num" data-line="crayon-59f6f948e5543507171843-19">19</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5543507171843-1"><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5543507171843-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e5543507171843-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5543507171843-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top" id="crayon-59f6f948e5543507171843-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">extractTextPlugin</span><span class="crayon-sy">.</span><span class="crayon-e">extract</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f6f948e5543507171843-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">fallback</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f6f948e5543507171843-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span></div><div class="crayon-line crayon-marked-line crayon-bottom crayon-striped-line" id="crayon-59f6f948e5543507171843-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f6f948e5543507171843-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5543507171843-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-sy">(</span><span class="crayon-v">png</span><span class="crayon-o">|</span><span class="crayon-v">jpg</span><span class="crayon-o">|</span><span class="crayon-v">gif</span><span class="crayon-sy">)</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5543507171843-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5543507171843-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-s">'url-loader'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5543507171843-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">options</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5543507171843-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">limit</span><span class="crayon-o">:</span><span class="crayon-cn">500000</span></div><div class="crayon-line" id="crayon-59f6f948e5543507171843-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5543507171843-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e5543507171843-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5543507171843-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e5543507171843-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0312 seconds] -->
<p>作完上边这四部后，就可以使用webpack进行打包了。</p>
<h3>图片路径问题：</h3>
<p>利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来，但是CSS路径并不正确，很多小伙伴就在这里搞个几天还是没有头绪，网上也给出了很多的解决方案，我觉的最好的解决方案是使用publicPath解决，我也一直在用。</p>
<p><strong>publicPath：</strong>是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。</p>
<p>在处理前，我们在webpack.config.js 上方声明一个对象，叫website。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5549996687927" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var website ={
    publicPath:"http://192.168.1.108:1717/"
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5549996687927-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5549996687927-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5549996687927-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5549996687927-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">website</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5549996687927-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">publicPath</span><span class="crayon-o">:</span><span class="crayon-s">"http://192.168.1.108:1717/"</span></div><div class="crayon-line" id="crayon-59f6f948e5549996687927-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0214 seconds] -->
<p>注意，这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。</p>
<p>然后在output选项中引用这个对象的publicPath属性。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e554e100491620" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js',
        publicPath:website.publicPath
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e554e100491620-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e554e100491620-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e554e100491620-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e554e100491620-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e554e100491620-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e554e100491620-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e554e100491620-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e554e100491620-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e554e100491620-1"><span class="crayon-h"> </span><span class="crayon-c">//出口文件的配置项</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e554e100491620-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e554e100491620-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//输出的路径，用了Node语法</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e554e100491620-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e554e100491620-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//输出的文件名称</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e554e100491620-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">'[name].js'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e554e100491620-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">publicPath</span><span class="crayon-o">:</span><span class="crayon-v">website</span><span class="crayon-sy">.</span><span class="crayon-i">publicPath</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e554e100491620-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0304 seconds] -->
<p>配置完成后，你再使用webpack命令进行打包，你会发现原来的相对路径改为了绝对路径，这样来讲速度更快。</p>
<p><strong>总结：</strong>这节课我们实现了CSS的分离，并在分离后处理了图片路径不对的问题。处理路径的方法一定要充分理解，因为这在工作中经常用到。</p>
<p>&nbsp;</p>
<h1><span id="10html">第10节：图片迈坑：处理HTML中的图片</span></h1>
<p>在webpack中是不喜欢你使用标签&lt;img&gt;来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：<strong>html-withimg-loader</strong>。他可以很好的处理我们在html 中引入图片的问题。因为是国人开发的，文档都是中文，所以学习起来还是比较简单的。所以在学习新课之前我们先解决两个小伙伴的问题。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>只有项目安装webpack，如何打包？</h3>
<p>有的小伙伴在学习视频时，并没有全局安装webpack，而是使用了项目安装。首先我要说的是，这种做法是webpack推崇的，webpack并不鼓励全局安装webpack。但是小伙伴看我视频中直接在终端用webpack进行打包项目，他使用时会出现不是内部命令或者外部命令。</p>
<p>这时候需要配置package.json里的scripts选项，我们以前的课程已经学习了配置 webpack-dev-server命令，在这个命令下面我们再加一个<strong>build</strong>命令进行打包项目使用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5556615479637" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
  "scripts": {
    "server": "webpack-dev-server --open",
    "build":"webpack"
  },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5556615479637-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5556615479637-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5556615479637-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5556615479637-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5556615479637-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5556615479637-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"server"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"webpack-dev-server --open"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5556615479637-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-s">"webpack"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5556615479637-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0107 seconds] -->
<p>配置完成后，可以在控制台输入<strong>npm run build</strong> 进行打包。</p>
<h3>如何把图片放到指定的文件夹下</h3>
<p>前边两节课程，打包后的图片并没有放到images文件夹下，要放到images文件夹下，其实只需要配置我们的url-loader选项就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e555b992774188" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
   module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:5000,
                       outputPath:'images/',
                   }
               }]
            }
          ]
    },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-14">14</div><div class="crayon-num crayon-marked-num crayon-top crayon-bottom" data-line="crayon-59f6f948e555b992774188-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-16">16</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-18">18</div><div class="crayon-num" data-line="crayon-59f6f948e555b992774188-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e555b992774188-20">20</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e555b992774188-1"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-v">module</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">rules</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">extractTextPlugin</span><span class="crayon-sy">.</span><span class="crayon-e">extract</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">fallback</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-sy">(</span><span class="crayon-v">png</span><span class="crayon-o">|</span><span class="crayon-v">jpg</span><span class="crayon-o">|</span><span class="crayon-v">gif</span><span class="crayon-sy">)</span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-s">'url-loader'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">options</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">limit</span><span class="crayon-o">:</span><span class="crayon-cn">5000</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-bottom" id="crayon-59f6f948e555b992774188-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">outputPath</span><span class="crayon-o">:</span><span class="crayon-s">'images/'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e555b992774188-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e555b992774188-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0617 seconds] -->
<p>这回你再执行打包就可以把图片打包到images文件夹里了。</p>
<h3>html-withimg-loader</h3>
<p>html-withimg-loader就是我们今天的重点了，这个插件并不是很火，也是我个人喜欢的一个小loader。解决的问题就是在hmtl文件中引入&lt;img&gt;标签的问题。</p>
<p>安装：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5561120484133" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install html-withimg-loader --save</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5561120484133-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5561120484133-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">html</span><span class="crayon-o">-</span><span class="crayon-v">withimg</span><span class="crayon-o">-</span><span class="crayon-v">loader</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p><strong>配置loader</strong></p>
<p>webpack.config.js</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5565308696602" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5565308696602-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5565308696602-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5565308696602-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5565308696602-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5565308696602-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5565308696602-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-sy">(</span><span class="crayon-v">htm</span><span class="crayon-o">|</span><span class="crayon-v">html</span><span class="crayon-sy">)</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-v">i</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5565308696602-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-h"> </span><span class="crayon-s">'html-withimg-loader'</span><span class="crayon-sy">]</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5565308696602-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0012 seconds] -->
<p>然后在终端中可以进行打包了。你会发现images被很好的打包了。并且路径也完全正确。</p>
<p><strong>总结：</strong>我们通过三节课的时间讲了webpack图片中的坑，这些坑在我初学webpack初期给我带来了不少的麻烦，我也算是倾囊相教了，希望小伙伴们有所收获。在你工作中遇到图片的问题，也可以返回文章里进行对比查找问题。</p>
<h1><span id="11cssless">第11节：CSS进阶：Less文件的打包和分离</span></h1>
<p>第05节中已经讲过CSS文件的打包，后来又讲了CSS分离。这节我们讲解一下Less文件如何打包和分离。Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。也就是说Less给我们枯燥单一的样式文件加入了编程机制，这让我们这些前端程序员很受用，所以在工作中大部分程序员都使用了Leess开发。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>打包Less文件</h3>
<p><strong>安装:</strong></p>
<p>要使用Less，我们要首先安装Less的服务，当然也是用npm来进行安装。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e556c482755351" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev less</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e556c482755351-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e556c482755351-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">less</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>还需要安装Less-loader用来打包使用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5571233075979" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev less-loader</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5571233075979-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5571233075979-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">less</span><span class="crayon-o">-</span><span class="crayon-v">loader</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p><strong>写loader配置：</strong></p>
<p>安装好后，需要在webpack.config.js里编写loader配置，当然要想正确解析成CSS，还是需要style-loader和css-loader的帮助，但是这两个loader前边已经讲过了，所以在这里就不重复了，如果你还对这两个loader不熟悉，那自行回去补前边的第五节吧。</p>
<p>webpack.config.js</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5575423752233" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    test: /\.less$/,
    use: [{
           loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        , {
            loader: "less-loader" // compiles Less to CSS
        }]
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5575423752233-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5575423752233-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5575423752233-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5575423752233-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5575423752233-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5575423752233-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5575423752233-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5575423752233-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5575423752233-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5575423752233-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5575423752233-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5575423752233-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">less</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5575423752233-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5575423752233-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span><span class="crayon-h"> </span><span class="crayon-c">// creates style nodes from JS strings</span></div><div class="crayon-line" id="crayon-59f6f948e5575423752233-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5575423752233-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span><span class="crayon-h"> </span><span class="crayon-c">// translates CSS into CommonJS</span></div><div class="crayon-line" id="crayon-59f6f948e5575423752233-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5575423752233-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"less-loader"</span><span class="crayon-h"> </span><span class="crayon-c">// compiles Less to CSS</span></div><div class="crayon-line" id="crayon-59f6f948e5575423752233-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5575423752233-10"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0161 seconds] -->
<p><strong>编写一个less文件</strong></p>
<p>现在webpack的配置好了，我们还需要编写一个less文件，这里明文为black.less.里边只做一件是就是把一个层的背景设置成黑色。</p>
<p>black.less</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e557b374064624" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
@base :#000;
#gogo{
    width:300px;
    height:300px;
    background-color:@base;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e557b374064624-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e557b374064624-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e557b374064624-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e557b374064624-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e557b374064624-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e557b374064624-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e557b374064624-1"><span class="crayon-v">@base</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i ">#000</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e557b374064624-2"><span class="crayon-k ">#gogo</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e557b374064624-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-i ">300px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e557b374064624-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">300px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e557b374064624-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-v">@base</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e557b374064624-6"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0195 seconds] -->
<p>这里#gogo是层的ID名称。@base是我们设置的变量名称。</p>
<p><strong>引入到我们entery.js文件中</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e557f741393079" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import less from './css/black.less';</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e557f741393079-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e557f741393079-1"><span class="crayon-e">import </span><span class="crayon-e">less </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./css/black.less'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0189 seconds] -->
<p>这样我们就可以把less文件进行打包了。我们可以使用webpack命令打包试一试。</p>
<h3>把Lees文件分离。</h3>
<p>我们之前讲了extract-text-webpack-plugin这个插件，想把Less文件分离出来的方法跟这个几乎一样，之前的我们在第09节中讲过，这里我们就只讲less的loader配置方法。（<span style="color: #ff0000;">此处建议收看视频</span>）</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5584610177344" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5584610177344-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5584610177344-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5584610177344-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5584610177344-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5584610177344-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5584610177344-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5584610177344-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5584610177344-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5584610177344-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5584610177344-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e5584610177344-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5584610177344-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5584610177344-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5584610177344-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">less</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5584610177344-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">extractTextPlugin</span><span class="crayon-sy">.</span><span class="crayon-e">extract</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5584610177344-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5584610177344-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5584610177344-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5584610177344-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"less-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5584610177344-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5584610177344-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// use style-loader in development</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5584610177344-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">fallback</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span></div><div class="crayon-line" id="crayon-59f6f948e5584610177344-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5584610177344-12"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0261 seconds] -->
<p>配置好后，你会发现less被分离到了index.css文件里。</p>
<p>总结：Less是非常好的CSS扩展，但是Less得转换稍显麻烦，好的是webpack为我们提供了简单轻松的转换方法。希望小伙伴可以学好这一课，在你们的工作中都开始使用Less编写你们css代码。</p>
<h1><span id="12csssass">第12节：CSS进阶：SASS文件的打包和分离</span></h1>
<p>上节课学习了Less的打包和分离，群里使用SASS的小伙伴马上就不干了，要求讲一下SASS的配置，其实你会了Less得配置，SASS的配置可以很轻松的学会，为了公平公正，那我们就用一节课的时间学一下SASS的配置的。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>安装SASS打包的loader</h3>
<p>这里需要 在项目目录下用npm安装两个包。<strong>node-sass和sass-loader</strong></p>
<p>node-sass：因为sass-loader依赖于node-sass，所以需要先安装node-sass</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e558b626927431" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev node-sass</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e558b626927431-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e558b626927431-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">node</span><span class="crayon-o">-</span><span class="crayon-v">sass</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0285 seconds] -->
<p>sass-loader:</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5590770649472" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev sass-loader</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5590770649472-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5590770649472-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">sass</span><span class="crayon-o">-</span><span class="crayon-v">loader</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0345 seconds] -->
<p><strong><span style="color: #ff0000;">注意：</span></strong>在用npm安装时，这个loader很容易安装失败，最好使用cnpm来进行安装<span style="line-height: inherit;">。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。</span></p>
<h3>编写loader配置</h3>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5595627630386" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5595627630386-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5595627630386-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5595627630386-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5595627630386-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5595627630386-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5595627630386-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5595627630386-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5595627630386-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5595627630386-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5595627630386-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5595627630386-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5595627630386-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">scss</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5595627630386-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5595627630386-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span><span class="crayon-h"> </span><span class="crayon-c">// creates style nodes from JS strings</span></div><div class="crayon-line" id="crayon-59f6f948e5595627630386-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5595627630386-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span><span class="crayon-h"> </span><span class="crayon-c">// translates CSS into CommonJS</span></div><div class="crayon-line" id="crayon-59f6f948e5595627630386-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5595627630386-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"sass-loader"</span><span class="crayon-h"> </span><span class="crayon-c">// compiles Sass to CSS</span></div><div class="crayon-line" id="crayon-59f6f948e5595627630386-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5595627630386-10"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0507 seconds] -->
<p>需要注意的是loader的加载要有先后顺序。</p>
<h3>Sass文件的编写</h3>
<p>写好loader配置后，就可以愉快的编写sass文件拉，但是不要忘记把sass文件引入到entery.js中。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e559a470768758" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e559a470768758-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559a470768758-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e559a470768758-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559a470768758-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e559a470768758-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559a470768758-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e559a470768758-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e559a470768758-1"><span class="crayon-v">$nav-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#FFF</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559a470768758-2"><span class="crayon-k ">#nav </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e559a470768758-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">$width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559a470768758-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-v">$width</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e559a470768758-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">30px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559a470768758-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-v">$nav-color</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e559a470768758-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0195 seconds] -->
<p>都完成后，你就可以启动我们<strong>npm run server</strong> 来查看效果了。</p>
<h3>把SASS文件分离。</h3>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e559f006045090" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e559f006045090-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559f006045090-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e559f006045090-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559f006045090-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e559f006045090-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559f006045090-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e559f006045090-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559f006045090-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e559f006045090-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559f006045090-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e559f006045090-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e559f006045090-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e559f006045090-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559f006045090-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">scss</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e559f006045090-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">extractTextPlugin</span><span class="crayon-sy">.</span><span class="crayon-e">extract</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559f006045090-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e559f006045090-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559f006045090-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e559f006045090-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"sass-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559f006045090-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e559f006045090-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// use style-loader in development</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559f006045090-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">fallback</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span></div><div class="crayon-line" id="crayon-59f6f948e559f006045090-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e559f006045090-12"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0153 seconds] -->
<p>这节课算是专门为sass使用者录制的吧，其实整体过程和less的使用差不多，希望你能在工作中开始使用sass，并写出漂亮的css代码。</p>
<h1><span id="13csscss3">第13节：CSS进阶：自动处理CSS3属性前缀</span></h1>
<p>CSS3已经成了前端的<strong>必会技能</strong>，但是你一定为那些属性需要加前缀，那些属性不需要加前缀而头疼。以前我在课程中讲过一个can i use的网站，可以查询这些，但是每次都查实在是编码效率太低了。这节课我们就学习一下如何通过<strong>postcss-loader</strong>给css3属性自动添加前缀。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>什么是属性前缀</h3>
<p>我们先来看一下代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55a5187975044" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55a5187975044-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55a5187975044-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55a5187975044-1"><span class="crayon-e ">-webkit-transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">rotate</span><span class="crayon-sy">(</span><span class="crayon-i ">45deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55a5187975044-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">rotate</span><span class="crayon-sy">(</span><span class="crayon-i ">45deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。</p>
<p><strong>PostCSS</strong></p>
<p>PostCSS是一个CSS的处理平台，它可以帮助你的CSS实现更多的功能，但是今天我们就通过其中的一个加前缀的功能，初步了解一下PostCSS。</p>
<h3>安装</h3>
<p>需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55aa354631039" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev postcss-loader autoprefixer</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55aa354631039-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55aa354631039-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">postcss</span><span class="crayon-o">-</span><span class="crayon-e">loader </span><span class="crayon-v">autoprefixer</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0214 seconds] -->
<p></p>
<h3>postcss.config.js</h3>
<p>postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。</p>
<p><strong>postcss.config.js</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55af145034603" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55af145034603-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55af145034603-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55af145034603-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55af145034603-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55af145034603-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55af145034603-1"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55af145034603-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e55af145034603-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'autoprefixer'</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55af145034603-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e55af145034603-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0010 seconds] -->
<p>这就是对postCSS一个简单的配置，引入了autoprefixer插件。让postCSS拥有添加<strong>前缀</strong>的能力，它会根据 can i use 来增加相应的css3属性前缀。</p>
<h3>编写loader</h3>
<p>对postcss.config.js配置完成后，我们还需要编写我们的loader配置。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55b4705261416" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
      test: /\.css$/,
      use: [
            {
              loader: "style-loader"
            }, {
              loader: "css-loader",
              options: {
                 modules: true
              }
            }, {
              loader: "postcss-loader"
            }
      ]
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b4705261416-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b4705261416-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b4705261416-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b4705261416-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b4705261416-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b4705261416-12">12</div><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b4705261416-14">14</div><div class="crayon-num" data-line="crayon-59f6f948e55b4705261416-15">15</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55b4705261416-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b4705261416-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55b4705261416-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b4705261416-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e55b4705261416-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"style-loader"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b4705261416-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e55b4705261416-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"css-loader"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b4705261416-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">options</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e55b4705261416-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">modules</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b4705261416-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e55b4705261416-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b4705261416-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"postcss-loader"</span></div><div class="crayon-line" id="crayon-59f6f948e55b4705261416-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b4705261416-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e55b4705261416-15"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0228 seconds] -->
<p></p>
<h3>提取CSS</h3>
<p>配置提取CSS的loader配置.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55b9476640609" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
    
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55b9476640609-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b9476640609-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55b9476640609-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b9476640609-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55b9476640609-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b9476640609-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e55b9476640609-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b9476640609-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e55b9476640609-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55b9476640609-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e55b9476640609-11">11</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55b9476640609-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b9476640609-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-v">css</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55b9476640609-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">extractTextPlugin</span><span class="crayon-sy">.</span><span class="crayon-e">extract</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b9476640609-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">fallback</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'style-loader'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55b9476640609-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b9476640609-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'css-loader'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">options</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-v">importLoaders</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55b9476640609-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'postcss-loader'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b9476640609-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e55b9476640609-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55b9476640609-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-59f6f948e55b9476640609-11"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0174 seconds] -->
<p>总结:postcss还有很多功能，我希望小伙伴学会自学。这里给出<strong>postcss-loader</strong>的github地址：<a href="https://github.com/postcss/postcss-loader">https://github.com/postcss/postcss-loader</a></p>
<h1><span id="14csscss">第14节：CSS进阶：消除未使用的CSS</span></h1>
<p>像Bootstrap这样的框架往往会带有很多CSS。在项目中通常我们只使用它的一小部分。就算我们自己写CSS，随着项目的进展，CSS也会越来越多，有时候需求更改，带来了DOM结构的更改，这时候我们可能无暇关注CSS样式，造成很多CSS的冗余。这节课就学习用webpack消除未使用的CSS。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>PurifyCSS</h3>
<p>使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。</p>
<h3>安装PurifyCSS-webpack</h3>
<p>从名字你就可以看出这是一个插件，而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55c0541730545" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm i -D purifycss-webpack purify-css</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55c0541730545-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55c0541730545-1"><span class="crayon-i">npm</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">D</span><span class="crayon-h"> </span><span class="crayon-v">purifycss</span><span class="crayon-o">-</span><span class="crayon-e">webpack </span><span class="crayon-v">purify</span><span class="crayon-o">-</span><span class="crayon-v">css</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>这里的-D代表的是&#8211;save-dev ,只是一个简写。</p>
<p><strong>引入glob</strong></p>
<p>因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55c5768095761" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const glob = require('glob');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55c5768095761-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55c5768095761-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">glob</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'glob'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>引入purifycss-webpack</p>
<p>同样在webpack.config.js文件头部引入purifycss-webpack</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55c9688448353" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const PurifyCSSPlugin = require("purifycss-webpack");</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55c9688448353-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55c9688448353-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">PurifyCSSPlugin</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">"purifycss-webpack"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>配置plugins</p>
<p>引入完成后我们需要在webpack.config.js里配置plugins。代码如下，重点看标黄部分。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55ce140629597" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'
        
    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })

]</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55ce140629597-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55ce140629597-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55ce140629597-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e55ce140629597-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e55ce140629597-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e55ce140629597-11">11</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-12">12</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f6f948e55ce140629597-13">13</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-14">14</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-59f6f948e55ce140629597-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55ce140629597-16">16</div><div class="crayon-num" data-line="crayon-59f6f948e55ce140629597-17">17</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55ce140629597-1"><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55ce140629597-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//new uglify() </span></div><div class="crayon-line" id="crayon-59f6f948e55ce140629597-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">htmlPlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55ce140629597-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">minify</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e55ce140629597-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">removeAttrubuteQuotes</span><span class="crayon-o">:</span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55ce140629597-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55ce140629597-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">hash</span><span class="crayon-o">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55ce140629597-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">template</span><span class="crayon-o">:</span><span class="crayon-s">'./src/index.html'</span></div><div class="crayon-line" id="crayon-59f6f948e55ce140629597-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55ce140629597-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55ce140629597-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">extractTextPlugin</span><span class="crayon-sy">(</span><span class="crayon-s">"css/index.css"</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-59f6f948e55ce140629597-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">PurifyCSSPlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f6f948e55ce140629597-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// Give paths to parse for rules. These should be absolute!</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f6f948e55ce140629597-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">paths</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">glob</span><span class="crayon-sy">.</span><span class="crayon-e">sync</span><span class="crayon-sy">(</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'src/*.html'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-59f6f948e55ce140629597-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55ce140629597-16">&nbsp;</div><div class="crayon-line" id="crayon-59f6f948e55ce140629597-17"><span class="crayon-sy">]</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0600 seconds] -->
<p>这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。</p>
<p><span style="color: #ff0000;"><strong>注意</strong></span>：使用这个插件必须配合extract-text-webpack-plugin这个插件，这个插件在前边的课程已经讲解过了。如果你还不会请自学一下。</p>
<p>配置好上边的代码，我们可以故意在css文件里写一些用不到的属性，然后用webpack打包，你会发现没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins，因为这决定你代码的质量，非常有用。</p>
<p>&nbsp;</p>
<h1><span id="15webpackbabel">第15节：给webpack增加babel支持</span></h1>
<p>在前端开发中都开始使用ES6的语法了，虽然说webpack3增加了一些ES6的转换支持，但是实际效果不是很好，也可能是本人技术有限，没发挥出真正的功能。所以我在开发中还是喜欢添加Babel-loader的，我也查看了一些别人的webpack配置也都增加了babel-loader，所以这节课我们学习一下如何增加Babel支持。（此节文章部分内容引用了zhangwang大神的文章内容）</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>Babel是什么？</h3>
<p>Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过便宜帮你达到以下目的：</p>
<ul>
<li>使用下一代的javaScript代码(ES6,ES7&#8230;.)，即使这些标准目前并未被当前的浏览器完全支持。</li>
<li>使用基于JavaScript进行了扩展的语言，比如React的JSX。</li>
</ul>
<h3>Babel的安装与配置</h3>
<p>Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。</p>
<p>我们先一次性安装这些依赖包</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55d6520358956" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55d6520358956-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55d6520358956-1"><span class="crayon-e">cnpm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-e">core </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-e">loader </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-v">preset</span><span class="crayon-o">-</span><span class="crayon-e">es2015 </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-v">preset</span><span class="crayon-o">-</span><span class="crayon-v">react</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0011 seconds] -->
<p>在webpack中配置Babel的方法如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55da474370525" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55da474370525-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55da474370525-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55da474370525-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55da474370525-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55da474370525-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55da474370525-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e55da474370525-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55da474370525-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e55da474370525-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55da474370525-10">10</div><div class="crayon-num" data-line="crayon-59f6f948e55da474370525-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55da474370525-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55da474370525-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55da474370525-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-sy">(</span><span class="crayon-v">jsx</span><span class="crayon-o">|</span><span class="crayon-v">js</span><span class="crayon-sy">)</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55da474370525-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55da474370525-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-s">'babel-loader'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55da474370525-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">options</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55da474370525-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">presets</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f6f948e55da474370525-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"es2015"</span><span class="crayon-sy">,</span><span class="crayon-s">"react"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55da474370525-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e55da474370525-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55da474370525-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55da474370525-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">exclude</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-v">node_modules</span><span class="crayon-o">/</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55da474370525-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0239 seconds] -->
<p>现在你已经可以用webapck转换ES6的语法兼容各个浏览器了，我们可以修改一下entry.js的代码如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55df238645518" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import css from './css/index.css';
{
    let jspangString = 'Hello Webpack'
    document.getElementById('title').innerHTML=jspangString; 
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55df238645518-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55df238645518-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55df238645518-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55df238645518-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55df238645518-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55df238645518-1"><span class="crayon-e">import </span><span class="crayon-e">css </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./css/index.css'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55df238645518-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e55df238645518-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">let </span><span class="crayon-v">jspangString</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'Hello Webpack'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55df238645518-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'title'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">innerHTML</span><span class="crayon-o">=</span><span class="crayon-v">jspangString</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-59f6f948e55df238645518-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0331 seconds] -->
<p>上面的代码使用了ES6的let声明方法。如果你不使用Babel来进行转换，你会发现打包出来的js代码没有作兼容处理，使用了Babel转换的代码是进行处理过的。</p>
<h3>.babelrc配置</h3>
<p>虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。</p>
<p>在项目根目录新建.babelrc文件，并把配置写到文件里。</p>
<p><strong>.babelrc</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55e4546652085" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    "presets":["react","es2015"]
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55e4546652085-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55e4546652085-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55e4546652085-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55e4546652085-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55e4546652085-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"presets"</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-s">"react"</span><span class="crayon-sy">,</span><span class="crayon-s">"es2015"</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e55e4546652085-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0216 seconds] -->
<p><strong>.webpack.config.js里的loader配置</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55e9452902027" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55e9452902027-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55e9452902027-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55e9452902027-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55e9452902027-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55e9452902027-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55e9452902027-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e55e9452902027-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55e9452902027-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55e9452902027-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">test</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-sy">\</span><span class="crayon-sy">.</span><span class="crayon-sy">(</span><span class="crayon-v">jsx</span><span class="crayon-o">|</span><span class="crayon-v">js</span><span class="crayon-sy">)</span><span class="crayon-sy">$</span><span class="crayon-o">/</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55e9452902027-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55e9452902027-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">loader</span><span class="crayon-o">:</span><span class="crayon-s">'babel-loader'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55e9452902027-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55e9452902027-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">exclude</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-v">node_modules</span><span class="crayon-o">/</span></div><div class="crayon-line" id="crayon-59f6f948e55e9452902027-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0163 seconds] -->
<p></p>
<h3>ENV：</h3>
<p>现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流，我们在讲一下env的配置方法。</p>
<p>首先需要下载：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55ee474083942" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-devv babel-preset-env</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55ee474083942-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55ee474083942-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">devv </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-v">preset</span><span class="crayon-o">-</span><span class="crayon-v">env</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>然后修改.babelrc里的配置文件。其实只要把之前的<strong>es2015</strong>换成<strong>env</strong>就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55f2744808330" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    "presets":["react","env"]
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55f2744808330-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55f2744808330-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55f2744808330-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55f2744808330-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55f2744808330-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"presets"</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-s">"react"</span><span class="crayon-sy">,</span><span class="crayon-s">"env"</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f6f948e55f2744808330-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>总结：对于在React中Babel的使用，如何解析JSX，我会在后边的课程作详细了解，大家不要着急。在实际工作中还是要安装Babel的，这样能更好的兼容每种浏览器，而把Babel的配置文件分解出来是最好的选择。</p>
<h1><span id="16">第16节：打包后如何调试</span></h1>
<p>作为一个程序员每天的大部分工作就是调试自己写的程序，那我们使用了webpack后，所以代码都打包到了一起，给调试带来了麻烦，但是webpack已经为我们充分考虑好了这点，它支持生产Source Maps来方便我们的调试。（敲黑板，这节可能偏理论一点。）</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<p>在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。</p>
<p>四种选项</p>
<p>在配置devtool时，webpack给我们提供了四种选项。</p>
<ul>
<li>source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；</li>
<li>cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。</li>
<li> eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。</li>
<li>cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。</li>
</ul>
<p>四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。</p>
<p>个人意见是，如果大型项目可以使用source-map，如果是中小型项目使用eval-source-map就完全可以应对，需要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。</p>
<p>简单的配置：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e55fa741585502" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

//作者：zhangwang</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e55fa741585502-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55fa741585502-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e55fa741585502-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55fa741585502-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e55fa741585502-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55fa741585502-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e55fa741585502-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55fa741585502-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e55fa741585502-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e55fa741585502-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e55fa741585502-1"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55fa741585502-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">devtool</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'eval-source-map'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e55fa741585502-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">__dirname</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s">"/app/main.js"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55fa741585502-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e55fa741585502-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">__dirname</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s">"/public"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55fa741585502-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"bundle.js"</span></div><div class="crayon-line" id="crayon-59f6f948e55fa741585502-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55fa741585502-8"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e55fa741585502-9">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e55fa741585502-10"><span class="crayon-c">//作者：zhangwang</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0018 seconds] -->
<p>总结：调试在开发中也是必不可少的，但是一定要记得在上线前一定要修改webpack配置，在打出上线包。</p>
<h1><span id="17">第17节：实战技巧：开发和生产并行设置</span></h1>
<p>一周没有写博客了，这一周都在出差（10月9-10月12日），肯定有小伙伴等着看教程了，在这里跟小伙伴说对不起了。这节详细讲讲用webapck开发和生产（或者说开发和上线）的那些事。把小伙伴容易迷茫的几个点讲清楚。（从这篇开始强烈建议看视频学习，文章很难表述我的意思）</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>依赖不同</h3>
<p>一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的。</p>
<ul>
<li>开发依赖：只在开发中用来帮助你进行开发，简化代码或者生成兼容设置的以来包。你可以打开package.json来查看，devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。</li>
<li>生产依赖：就是比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这些包在dependencies中。</li>
</ul>
<h3>npm安装</h3>
<p>假如我们要在项目中使用jquery库，这时候我们一般有三种安装方法，每种我都详细讲解一下。</p>
<p><strong>第一种：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5601393016781" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install jquery</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5601393016781-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5601393016781-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">jquery</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0178 seconds] -->
<p>安装完成后，你会发现在package.json中并不存在这个包的依赖。如果你项目拷贝给别人继续开发，或者别人和你git合作，再次下载项目npm install时就会缺少这个jquery包。项目就会无法正常运行，所以这也是我们最不赞成的安装方法。</p>
<p><strong>第二种：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5606805277794" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install jquery --save</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5606805277794-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5606805277794-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">jquery</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>安装完成后，它存在于package.json的dependencies中，也就是说它是生产环境需要依赖的包（上线时需要的以来包）。</p>
<p><strong>第三种：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e560b533580595" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install jquery --save-dev</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e560b533580595-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e560b533580595-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">jquery</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-v">dev</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>安装完成后，它存在于package.json的devDependencies中，也就是说它是开发环境中需要的，上线并不需要这个包的依赖。</p>
<p><strong>安装全部项目依赖包：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5610353764450" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5610353764450-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5610353764450-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p><strong>安装生产环境依赖包：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5614372297157" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --production</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5614372297157-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5614372297157-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">production</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0192 seconds] -->
<p></p>
<h3>配置生产和开发并行</h3>
<p>我们在以前的配置中设置了一个变量<span style="line-height: inherit;"><strong>website</strong>，用于静态资源正确找到路径。那如果生产环境和开发环境不一样，而且我们需要来回切换，这时候我们需要更好的设置方法。</span></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5619380242809" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var website={
    publicPath:"http://192.168.0.104:1717/"
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5619380242809-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5619380242809-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5619380242809-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5619380242809-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">website</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5619380242809-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">publicPath</span><span class="crayon-o">:</span><span class="crayon-s">"http://192.168.0.104:1717/"</span></div><div class="crayon-line" id="crayon-59f6f948e5619380242809-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p><strong>修改package.json命令</strong></p>
<p>其实就是添加一个dev设置，并通过环境变量来进行区分，下面是package.json里的值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e561d711312955" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 "scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&amp;webapck",
    "build": "set type=build&amp;webpack"
  },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e561d711312955-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e561d711312955-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e561d711312955-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e561d711312955-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e561d711312955-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e561d711312955-1"><span class="crayon-h"> </span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e561d711312955-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"server"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"webpack-dev-server --open"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e561d711312955-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"dev"</span><span class="crayon-o">:</span><span class="crayon-s">"set type=dev&amp;webapck"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e561d711312955-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"set type=build&amp;webpack"</span></div><div class="crayon-line" id="crayon-59f6f948e561d711312955-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0174 seconds] -->
<p><strong>修改webpack.config.js文件</strong></p>
<p>可以利用node的语法来读取type的值，然后根据type的值用if&#8211;else判断。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5622851160855" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
if(process.env.type== "build"){
    var website={
        publicPath:"http://192.168.0.104:1717/"
    }
}else{
    var website={
        publicPath:"http://cdn.jspang.com/"
    }
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5622851160855-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5622851160855-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5622851160855-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5622851160855-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5622851160855-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5622851160855-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5622851160855-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5622851160855-8">8</div><div class="crayon-num" data-line="crayon-59f6f948e5622851160855-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5622851160855-1"><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">process</span><span class="crayon-sy">.</span><span class="crayon-v">env</span><span class="crayon-sy">.</span><span class="crayon-v">type</span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-s">"build"</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5622851160855-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">website</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5622851160855-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">publicPath</span><span class="crayon-o">:</span><span class="crayon-s">"http://192.168.0.104:1717/"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5622851160855-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e5622851160855-5"><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5622851160855-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">website</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e5622851160855-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">publicPath</span><span class="crayon-o">:</span><span class="crayon-s">"http://cdn.jspang.com/"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5622851160855-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e5622851160855-9"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0191 seconds] -->
<p>如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5627879032851" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log( encodeURIComponent(process.env.type) );</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5627879032851-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5627879032851-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-e">encodeURIComponent</span><span class="crayon-sy">(</span><span class="crayon-v">process</span><span class="crayon-sy">.</span><span class="crayon-v">env</span><span class="crayon-sy">.</span><span class="crayon-v">type</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p></p>
<h3>Mac下的package.json设置</h3>
<p>MAC电脑下需要把set换成export，并且要多加一个&amp;符，具体代码如下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e562b611484690" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
  "scripts": {
    "server": "webpack-dev-server --open",
    "dev":"export type=dev&amp;&amp;webpack",
    "build": "export type=build&amp;&amp;webpack"
  },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e562b611484690-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e562b611484690-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e562b611484690-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e562b611484690-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e562b611484690-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e562b611484690-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e562b611484690-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"server"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"webpack-dev-server --open"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e562b611484690-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"dev"</span><span class="crayon-o">:</span><span class="crayon-s">"export type=dev&amp;&amp;webpack"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e562b611484690-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"export type=build&amp;&amp;webpack"</span></div><div class="crayon-line" id="crayon-59f6f948e562b611484690-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0012 seconds] -->
<p></p>
<h1><span id="18webpack">第18节：实战技巧：webpack模块化配置</span></h1>
<p>现在的前端开发随着ES6的普及已经大面积使用模块化进行开发了，那在webpack.config.js配置文件中，如何进行模块化开发那？例如把开发环境的写到一个模块中，把生产环境的写到一个模块中。这节课我们就用一节课的时间学习一下webpack模块化配置的技巧。</p>
<p><a href="https://www.chungold.com/course/32"><img class="alignnone" src="style/images/E5BEAEE4BFA1E59BBEE78987_20170922101909.png" alt="" width="800" height="400" /></a></p>
<p><strong>视频教程购买地址</strong>：<a href="https://www.chungold.com/course/32">https://chungold.com</a></p>
<h3>JS中的模块化实现</h3>
<p>先来看一下JavaScript如何实现模块话开发。其实很多小伙伴都会这种操作，那我们就当复习了，再预习一遍知识。看下面ES6中的模块化代码。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5631052392684" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function jspang(){
    alert('jspang.com:'+'webpack');
}
module.exports=jspang;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5631052392684-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5631052392684-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5631052392684-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5631052392684-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5631052392684-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5631052392684-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">alert</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang.com:'</span><span class="crayon-o">+</span><span class="crayon-s">'webpack'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f6f948e5631052392684-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5631052392684-4"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-o">=</span><span class="crayon-v">jspang</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0103 seconds] -->
<p>上面的代码是一个最简单的es6模块化写法，我们声明了一个jspang方法，并且把这个方法用module.exports进行暴露出去。然后我们在入口文件中用import进行引入，并进行使用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5636467743351" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import jspang from './jspang.js';
jspang();</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5636467743351-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5636467743351-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5636467743351-1"><span class="crayon-e">import </span><span class="crayon-e">jspang </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./jspang.js'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5636467743351-2"><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>我们了解如何作Javascript的模块化后，其实webpack的模块化和上边的过程很类似。</p>
<h3>webpack模块</h3>
<p>为了让大家容易看懂，我把webpack.config.js中的entry入口文件进行模块化设置，单独拿出来制作成一个模块。</p>
<p>首先在根目录，新建一个webpack_config文件夹，然后新建entry_webpack.js文件，代码如下：</p>
<p><strong>entry_webpack.js</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e563b321041746" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
//声明entry变量
const entry ={};  
//声明路径属性
entry.path={
    entry:'./src/entry.js'  
}
//进行模块化
module.exports =entry;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e563b321041746-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e563b321041746-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e563b321041746-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e563b321041746-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e563b321041746-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e563b321041746-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e563b321041746-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e563b321041746-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e563b321041746-1"><span class="crayon-c">//声明entry变量</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e563b321041746-2"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">entry</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-59f6f948e563b321041746-3"><span class="crayon-c">//声明路径属性</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e563b321041746-4"><span class="crayon-v">entry</span><span class="crayon-sy">.</span><span class="crayon-v">path</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e563b321041746-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry.js'</span><span class="crayon-h">&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e563b321041746-6"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f6f948e563b321041746-7"><span class="crayon-c">//进行模块化</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e563b321041746-8"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-v">entry</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0305 seconds] -->
<p>配置的模块化代码编写好以后，需要在webpack.config.js中引入，注意这里的引入只能使用require的方法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5640114468671" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const entry = require("./webpack_config/entry_webpack.js")</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5640114468671-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5640114468671-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">entry</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">"./webpack_config/entry_webpack.js"</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>然后在入口文件部分，修改成如下代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5645472790755" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 entry:entry.path,</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5645472790755-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5645472790755-1"><span class="crayon-h"> </span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-v">entry</span><span class="crayon-sy">.</span><span class="crayon-v">path</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>这时候你可以再次使用npm  run dev 进行测试，你会发现模块化成功了。</p>
<p><span style="color: #ff0000;"><strong>总结：</strong></span>模块化在实际工作中是必不可少的操作，但是现在的webpack教程还很少讲到，大家一定要重视这节，因为如果你搞不清这节的内容，可能你看别人的配置也会看不明白。记得一定要动手练习操作，否则你下面的课程也没办法学习。</p>
<h1><span id="19">第19节：实战技巧：优雅打包第三方类库</span></h1>
<p>在工作中引用第三方的框架是必不可少的，比如引入JQuery或者Vue，但是很多小伙伴一遇到引入第三方的类库时就不知道如何操作了。这节课就学习一下如何优雅并正确的用webpack引入第三方库。（<strong>本节建议收看视频学习</strong>）我们讲两种打包的方法，小伙伴们可以根据自己的喜好选择，个人认为两种都是比较不错的。</p>
<h3>引入JQuery</h3>
<p>其实引用第三方库的方法有很多种，但是有些并不是很优雅，还有些方法会出现打包问题，技术胖在这里介绍一下自己工作中引入第三方模块的方法，我们就拿JQuery为例。小伙伴们要举一反三，学会后试着自己引入Vue试试。</p>
<p><strong>安装JQuery</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e564b519341224" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save jquery</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e564b519341224-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e564b519341224-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-e">save </span><span class="crayon-v">jquery</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0126 seconds] -->
<p>安装时需要注意的时Jquery最终要在生产环境中使用，所以我们这里要使用<span style="color: #ff0000;"><strong>&#8211;save</strong></span>进行安装。</p>
<p><strong>修改entry.js文件</strong></p>
<p>安装好后，还需要引入到我们的entry.js中，这里直接使用import进行引入就可以。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5650945614452" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import $ from 'jquery';</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5650945614452-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5650945614452-1"><span class="crayon-i">import</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'jquery'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>这里引入是不需要我们写相对路径的，因为jquery的包是在node_modules里的，只要写一个包名jquery，系统会自动为我们查找的。</p>
<p>引入好后我们就可以在entry.js里使用jquery，我们可以加入下面的代码，然后进行测试。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5654815078612" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
$('#title').html('Hello JSpang');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5654815078612-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5654815078612-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#title'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-s">'Hello JSpang'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0300 seconds] -->
<p>可以看到上面是标准的jquery代码，你可以使用npm  run server 进行测试，现在代码顺利运行了，这说明我们引用的JQuery库成功了。需要说的是你不仅可以在入口中进行引入，你还可以在任何你需要的js中引入，webpack并不会重复打包，它只给我们打包一次。</p>
<h3>用plugin引入</h3>
<p>如果你觉的上面的方法和webpack没什么关系，只是普通的引入，webpack只是负责了一下打包，这样并没有全局感。那再学习一种在webapck.config.js中配置的方法，这种不需要你在入口文件中引入，而是webpack给你作了全局引入。这个插件就是<strong>ProvidePlugin</strong>。</p>
<p>ProvidePlugin是一个webpack自带的插件，Provide的意思就是<span style="color: #ff0000;">装备、提供</span>。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e565a889132862" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const webpack = require('webpack');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e565a889132862-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e565a889132862-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'webpack'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0212 seconds] -->
<p>在webpack.config.js里引入必须使用require，否则会报错的，这点小伙伴们一定要注意。</p>
<p>引入成功后配置我们的plugins模块，代码如下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e565f922422393" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
],</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e565f922422393-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e565f922422393-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e565f922422393-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e565f922422393-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e565f922422393-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e565f922422393-1"><span class="crayon-v">plugins</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e565f922422393-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-sy">.</span><span class="crayon-e">ProvidePlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f6f948e565f922422393-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-o">:</span><span class="crayon-s">"jquery"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e565f922422393-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f6f948e565f922422393-5"><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0010 seconds] -->
<p>配置好后，就可以在你的入口文件中使用了，而不用再次引入了。这是一种全局的引入，在实际工作中也可以很好的规范项目所使用的第三方库。</p>
<p><span style="color: #ff0000;"><strong>总结：</strong></span>每一个项目都可能引入第三方类库，而像Vue和Angular这样的成熟框架都推出了自己的webpack框架，比如<strong>vue-cli</strong>。但是很多情况还是需要我们手动更改这些配置好的webpack来适用于我们的公司项目，所以这节课的知识也是在工作中经常使用的，希望小伙伴们一定要重视并进行练习。</p>
<h1><span id="20watch">第20节：实战技巧：watch的正确使用方法</span></h1>
<p>在初级开发阶段，使用webpack-dev-server就可以充当服务器和完成打包任务，但时随着你项目的进一步完成，可能需要前后台联调或者两个前端合并代码时，就需要一个公共的服务器了。这时候我们每次保存后手动打包显然效率太低，我们希望的场景是代码发生变化后，只要保存，webpack自动为我们进行打包。这个工具就是watch，这节课我们把wacht完全学会，你会发现在开发中更加的得心应手。</p>
<h3>watch的配置</h3>
<p>很多小伙伴认为&#8211;warch直接使用就可以，并没有什么需要讲的。其实这只是初级的用法，但是在学习一种技术时，我们必须要做到了解全部，也就是常说的知其然知其所以然。我们看下面的配置代码，我在代码中已经做出了解释。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5666816373210" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
watchOptions:{
    //检测修改的时间，以毫秒为单位
    poll:1000, 
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    aggregeateTimeout:500, 
    //不监听的目录
    ignored:/node_modules/, 
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5666816373210-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5666816373210-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5666816373210-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5666816373210-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5666816373210-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5666816373210-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e5666816373210-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5666816373210-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5666816373210-1"><span class="crayon-v">watchOptions</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5666816373210-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//检测修改的时间，以毫秒为单位</span></div><div class="crayon-line" id="crayon-59f6f948e5666816373210-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">poll</span><span class="crayon-o">:</span><span class="crayon-cn">1000</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5666816373210-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作</span></div><div class="crayon-line" id="crayon-59f6f948e5666816373210-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">aggregeateTimeout</span><span class="crayon-o">:</span><span class="crayon-cn">500</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5666816373210-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//不监听的目录</span></div><div class="crayon-line" id="crayon-59f6f948e5666816373210-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ignored</span><span class="crayon-o">:</span><span class="crayon-o">/</span><span class="crayon-v">node_modules</span><span class="crayon-o">/</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5666816373210-8"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0015 seconds] -->
<p>上边的每一行配置我都作了说明，有时候你在没配置的情况下，直接用webpack &#8211;watch是不起作用的，这时候你需要进行配置这些选项。</p>
<p>配置好后，我们就可以痛快的使用watch了，在大型项目中，这大大加快了我们的开发效率，不用反复的手动打包了。</p>
<h3>BannerPlugin插件</h3>
<p>由于这节课的内容太少了，我们再讲一个工作中的小技巧，再工作中每个人写的代码都要写上备注，为的就是在发生问题时可以找到当时写代码的人。有时候也用于版权声明。</p>
<p>这个插件就是BannerPlugin，我们使用后会在JS中加上我们的版权或开发者声明。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e566c990330055" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
new webpack.BannerPlugin('JSPang版权所有，看官方免费视频到jspang.com收看')</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e566c990330055-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e566c990330055-1"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-sy">.</span><span class="crayon-e">BannerPlugin</span><span class="crayon-sy">(</span><span class="crayon-s">'JSPang版权所有，看官方免费视频到jspang.com收看'</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0141 seconds] -->
<p>需要注意的是在使用这个插件之前必须引入webpack。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5670517723588" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const webpack = require('webpack');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5670517723588-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5670517723588-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'webpack'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>这时在dist目录下的entery.js已经加上了版权声明。</p>
<p><img class="alignnone size-medium" src="style/images/webpack_bannerplugin.png" width="678" height="331" /></p>
<h1><span id="21webpack">第21节：实战技巧：webpack优化黑技能</span></h1>
<p>作为一个程序员，无论是写什么程序都i要有一颗不断优化的心。webpack在优化这条路上，也为我们作了很多配置，这节课我们就看看工作中常用的webpack优化黑技能。</p>
<h3>ProvidePlugin和import</h3>
<p>在第19节中学习了如何引入第三方类库，并引入了jquery，在引用JQuery时我们用了两种方法，第一种时import，第二种时使用ProvidePlugin插件。那两种引入方法有什么区别那?</p>
<ul>
<li>import引入方法：引用后不管你在代码中使用不适用该类库，都会把该类库打包起来，这样有时就会让代码产生冗余。</li>
<li>ProvidePlugin引入方法：引用后只有在类库使用时，才按需进行打包，所以建议在工作使用插件的方式进行引入。</li>
</ul>
<p>具体的对比操作，会在视频中演示，你会看出两种引入方法的对比打包结果。差距还是蛮大的。</p>
<h3>抽离JQuery</h3>
<p>上边的方法只是优化的第一步，工作中你会发现，不适用的类库几乎我们也不会引入，所以上边只是一个必要操作的第一步。那往往把第三方类库抽离出来，才是最好的解决方法。</p>
<p><strong>第一步：修改入口文件</strong></p>
<p>抽离的第一步是修改入口文件，把我们的JQuery也加入到入口文件中，看下面的代码。</p>
<p><strong>webpack.config.js</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5677803344869" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 entry:{
        entry:'./src/entry.js',
        jquery:'jquery'
 },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5677803344869-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5677803344869-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5677803344869-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5677803344869-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5677803344869-1"><span class="crayon-h"> </span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5677803344869-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry.js'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5677803344869-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">jquery</span><span class="crayon-o">:</span><span class="crayon-s">'jquery'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5677803344869-4"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0219 seconds] -->
<p><strong>第二步：引入插件</strong></p>
<p>我们需要引入optimize优化插件，插件里边是需要配置的，具体配置项看下面的代码。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e567b106224484" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
new webpack.optimize.CommonsChunkPlugin({
    //name对应入口文件中的名字，我们起的是jQuery
    name:'jquery',
    //把文件打包到哪里，是一个路径
    filename:"assets/js/jquery.min.js",
    //最小打包的文件模块数，这里直接写2就好
    minChunks:2
}),</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e567b106224484-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e567b106224484-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e567b106224484-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e567b106224484-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e567b106224484-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e567b106224484-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e567b106224484-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e567b106224484-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e567b106224484-1"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-sy">.</span><span class="crayon-v">optimize</span><span class="crayon-sy">.</span><span class="crayon-e">CommonsChunkPlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e567b106224484-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//name对应入口文件中的名字，我们起的是jQuery</span></div><div class="crayon-line" id="crayon-59f6f948e567b106224484-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jquery'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e567b106224484-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//把文件打包到哪里，是一个路径</span></div><div class="crayon-line" id="crayon-59f6f948e567b106224484-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">"assets/js/jquery.min.js"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e567b106224484-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//最小打包的文件模块数，这里直接写2就好</span></div><div class="crayon-line" id="crayon-59f6f948e567b106224484-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">minChunks</span><span class="crayon-o">:</span><span class="crayon-cn">2</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e567b106224484-8"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0220 seconds] -->
<p><strong>minChunks</strong>一般都是固定配置，但是不写是不行的，你会打包失败。</p>
<p>f<strong>ilename</strong>是可以省略的，这是直接打包到了打包根目录下，我们这里直接打包到了dist文件夹下边。</p>
<p>配置完成后，我们可以先删掉以前打包的dist目录，然后用webpack再次打包，你会发现jquery被抽离了出来，并且我们的entry.js文件变的很小。</p>
<h3>多个第三方类库抽离</h3>
<p>会了如何抽离Jquery，但是在实际开发中，我们会引用不止一个第三方类库，这时也需要抽离。我们拿引入Vue为例，看看如何抽离出来。</p>
<p><strong>第一步:我们先用npm 进行安装。</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5681359470552" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm instawll vue --save</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5681359470552-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5681359470552-1"><span class="crayon-e">npm </span><span class="crayon-e">instawll </span><span class="crayon-v">vue</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>注意这里是&#8211;save，而不是&#8211;save-dev。因为这个类库在生产环境中也是要使用的。</p>
<p><strong>第二步：在入口配置中引入vue和jquery</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5686836047140" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
entry:{
    entry:'./src/entry.js',
    jquery:'jquery',
    vue:'vue'
},</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5686836047140-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5686836047140-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e5686836047140-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e5686836047140-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e5686836047140-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5686836047140-1"><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5686836047140-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./src/entry.js'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e5686836047140-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">jquery</span><span class="crayon-o">:</span><span class="crayon-s">'jquery'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e5686836047140-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">vue</span><span class="crayon-o">:</span><span class="crayon-s">'vue'</span></div><div class="crayon-line" id="crayon-59f6f948e5686836047140-5"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0011 seconds] -->
<p>只是多比上边多加了一个vue选项。</p>
<p><strong>第三步：修改CommonsChunkPlugin配置</strong></p>
<p>需要修改两个位置：</p>
<ul>
<li>第一个是在name属性里把原来的字符串改为数组，因为我们要引入多个模块，所以是数组；</li>
<li>第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。</li>
</ul>
<p>下面是我们修改的代码，你可以跟jquery抽离时对比一下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e568b472317125" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
new webpack.optimize.CommonsChunkPlugin({
    //name对应入口文件中的名字，我们起的是jQuery
    name:['jquery','vue'],
    //把文件打包到哪里，是一个路径
    filename:"assets/js/[name].js",
    //最小打包的文件模块数，这里直接写2就好
    minChunks:2
}),</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e568b472317125-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e568b472317125-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e568b472317125-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e568b472317125-4">4</div><div class="crayon-num" data-line="crayon-59f6f948e568b472317125-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e568b472317125-6">6</div><div class="crayon-num" data-line="crayon-59f6f948e568b472317125-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e568b472317125-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e568b472317125-1"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-sy">.</span><span class="crayon-v">optimize</span><span class="crayon-sy">.</span><span class="crayon-e">CommonsChunkPlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e568b472317125-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//name对应入口文件中的名字，我们起的是jQuery</span></div><div class="crayon-line" id="crayon-59f6f948e568b472317125-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-s">'jquery'</span><span class="crayon-sy">,</span><span class="crayon-s">'vue'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e568b472317125-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//把文件打包到哪里，是一个路径</span></div><div class="crayon-line" id="crayon-59f6f948e568b472317125-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">"assets/js/[name].js"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e568b472317125-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//最小打包的文件模块数，这里直接写2就好</span></div><div class="crayon-line" id="crayon-59f6f948e568b472317125-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">minChunks</span><span class="crayon-o">:</span><span class="crayon-cn">2</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e568b472317125-8"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0102 seconds] -->
<p>配置好后，我们就可以在控制台输入webpack进行打包了。你会看到我们预想的结果，jquery和vue都被我们抽离出来了。</p>
<p><strong>总结：</strong>在项目开发中，我们很使用很多第三方类库，那好的做法就是把第三方这些类库全部抽离处理，这样在项目维护和性能上都是不错的选择。希望学会这个技巧后，你也能在工作中使用上。</p>
<p>&nbsp;</p>
<h1><span id="22">第22节：实战技巧：静态资源集中输出</span></h1>
<p>工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源，直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。</p>
<h3>使用copy-webpack-plugin</h3>
<p>copy-webpack-plugin就是专门为我们作静态资源转移的插件，不过它不同上两节使用的插件，它是需要安装的。</p>
<p><strong>插件安装</strong></p>
<p>插件的安装只要使用npm就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5692130971072" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
cnpm install --save-dev copy-webpack-plugin</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5692130971072-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5692130971072-1"><span class="crayon-e">cnpm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">copy</span><span class="crayon-o">-</span><span class="crayon-v">webpack</span><span class="crayon-o">-</span><span class="crayon-v">plugin</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0194 seconds] -->
<p>如果在安装过程中出错，你可以使用npm来进行安装。</p>
<p><strong>引入插件</strong></p>
<p>安装好后，需要在webpack.config.js文件的头部引入这个插件才可以使用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e5696733986442" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const copyWebpackPlugin= require("copy-webpack-plugin");</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e5696733986442-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e5696733986442-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">copyWebpackPlugin</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">"copy-webpack-plugin"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p><strong>配置插件</strong></p>
<p>引入之后我们就可以在plugins里边进行配置插件了，我们先看下面的插件配置代码，然后再进行详细讲解。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e569b114050484" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
new copyWebpackPlugin([{
        from:__dirname+'/src/public',
        to:'./public'
    }])</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e569b114050484-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e569b114050484-2">2</div><div class="crayon-num" data-line="crayon-59f6f948e569b114050484-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e569b114050484-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e569b114050484-1"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">copyWebpackPlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e569b114050484-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">from</span><span class="crayon-o">:</span><span class="crayon-v">__dirname</span><span class="crayon-o">+</span><span class="crayon-s">'/src/public'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f6f948e569b114050484-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">to</span><span class="crayon-o">:</span><span class="crayon-s">'./public'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e569b114050484-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0132 seconds] -->
<p></p>
<ul>
<li>from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。</li>
<li>to:要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。</li>
</ul>
<p>配置好后，我们就可以使用webpack 进行打包了，你会发现图片按照我们的配置打包了过去。</p>
<p><span style="color: #ff0000;"><strong>总结：</strong></span>你是不是觉的学习起来越来越容易了，因为你经过20多节课的学习，已经基本掌握了webpack的知识，剩下的就是不断练习和在实际项目中发现新的需求，然后找到新的loader或者pulgin来解决你的问题。</p>
<h1><span id="23json">第23节：实战技巧：Json配置文件使用</span></h1>
<p>在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。有时候你也会从后台读取到一个json的文件，这节课就学习如何在webpack环境中使用Json。如果你会webpack1或者webpack2版本中，你是需要加载一个json-loader的loader进来的，但是在webpack3.x版本中，你不再需要另外引入了。</p>
<h3>读出Json内容</h3>
<p><strong>第一步</strong>：现在我们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中可以方便引用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e56a1548795186" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;div id="json"&gt;&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e56a1548795186-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e56a1548795186-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"json"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p><strong>第二步</strong>：到src文件夹下，找到入口文件，我这里是entry.js文件。修改里边的代码，如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e56a6283620200" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var json =require('../config.json');
document.getElementById("json").innerHTML= json.name;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e56a6283620200-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f6f948e56a6283620200-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e56a6283620200-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">json</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'../config.json'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f6f948e56a6283620200-2"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"json"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">innerHTML</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">json</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0142 seconds] -->
<p>这两行代码非常简单，第一行是引入我们的json文件，第二行驶写入到到DOM中。</p>
<p><strong>第三部</strong>：启用我们的npm run server 命令就可以在浏览器中看到结果了。</p>
<h3>说说热更新</h3>
<p>其实在webpack3中启用热加载相当的容易，只要加入HotModuleReplacementPlugin这个插件就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f6f948e56af486029546" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
new webpack.HotModuleReplacementPlugin()</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f6f948e56af486029546-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f6f948e56af486029546-1"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">webpack</span><span class="crayon-sy">.</span><span class="crayon-e">HotModuleReplacementPlugin</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>现在只要你启动 npm run server 后，修改index.html中的内容，浏览器可以自动给我们更新出最新的页面。</p>
<p>但这里说的热加更新和我们平时写程序的热加载不是一回事，比如说我们Vue或者React中的热更新，并不是刷新整个页面，而是一个局部更新，而这里的更新是重新刷新了页面。</p>
<p>这点小伙伴们要搞清楚。</p>
<p><strong>总结：</strong>这节主要回答了两个同学的问题，这两个问题在实际开发中也经常用到，所以我就总结成课，给小伙伴们讲解一下，希望对你们有所帮助。</p>
<p>&nbsp;</p>
<h1><span id="24-webpack">第24节：剧终-webpack自学技巧传授</span></h1>
<p>本来打算在最后加一个多页webpack实战给大家的，但是这个要录制10多节，所以决定再独立出一套视频教程给大家（当然这是免费的）。请关注我的博客（http://jspang.com）。</p>
<p>这节课我会教大家一些自学webpack的技巧，让大家可以再本教程结束后继续自行精进，也算倾囊相授。（精彩内容视频呈现，请关注视频内容）</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
        <div class="gave" >
            <a href="javascript:;" id="gave">打赏</a>
            <div class="code" id="wechatCode" style="display: none">
                <img src="style/images/20170518151055111.png" alt="微信扫一扫支付">
                <div><img src="style/images/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div>
            </div>
        </div>        </div> <!-- //.entry-content -->
               <br>
        <div class="entry-tags text-left"></div>
    </div>

</article><!-- #post-## -->                              
				<div class="user-profile media">
    <div class="pull-left author-avater">
        <img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-110.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=220&amp;d=mm&amp;r=g 2x' class='avatar avatar-110 photo' height='110' width='110' />    </div>
    <div class="media-body">
        <div class="profile-heading">
            <h3><a href="http://jspang.com/author/jspang001/" title="由技术胖发布" rel="author">技术胖</a></h3>
        </div>
        <div class="website-link">http://jspang.com</div>
        <div class="author-description">
                    </div>
    </div>
</div><!-- .user-profile -->                               
				
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">文章导航</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://jspang.com/2017/09/07/react002/" rel="prev"><i class="fa fa-angle-left"></i> Previous Post</a></div><div class="nav-next"><a href="http://jspang.com/2017/10/22/react-all-01/" rel="next">Next Post <i class="fa fa-angle-right"></i></a></div></div>
	</nav>
									<div class="comment-box">
						<div id="comments" class="comments-area comments">
            <h3 class="common-title comments-title">
            77 Comments        </h3>

        <ul class="comment-list">

            			<li class="comment even thread-even depth-1" id="li-comment-570">
				<div id="comment-570" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ab99cbfd52c3eff95e7f525ef2b870bc-75.jpg' srcset='http://1.gravatar.com/avatar/ab99cbfd52c3eff95e7f525ef2b870bc?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">wLlebronc</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，动手作一作，改一下。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-571">
				<div id="comment-571" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/64be6742d3ae08163067183d3f9e3b17-75.jpg' srcset='http://0.gravatar.com/avatar/64be6742d3ae08163067183d3f9e3b17?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">XieszTrue</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>原文：<br />
如果你不作就不会出现错误<br />
改为：<br />
如果你不做就不会出现错误</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-601">
				<div id="comment-601" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>已经修改。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-572">
				<div id="comment-572" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/64be6742d3ae08163067183d3f9e3b17-75.jpg' srcset='http://0.gravatar.com/avatar/64be6742d3ae08163067183d3f9e3b17?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">XieszTrue</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>原文：<br />
Angluar.js+WebPack<br />
改为：<br />
AngularJS + WebPack</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-600">
				<div id="comment-600" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>感谢你的意见，文章中已经修改。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-573">
				<div id="comment-573" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f8f8109e2791d7827abf77beed7006b7-75.jpg' srcset='http://0.gravatar.com/avatar/f8f8109e2791d7827abf77beed7006b7?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">老K</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>文件夹写成了文件家<br />
还有就是全局安装webpack 不需要建立好文件夹</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-574">
				<div id="comment-574" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/9741dcf08c629f7a3ed87a6667f324d4-75.jpg' srcset='http://0.gravatar.com/avatar/9741dcf08c629f7a3ed87a6667f324d4?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">樱桃小丸子</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>可以说明下全局安装和非全局安装的区别作用</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-599">
				<div id="comment-599" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>非常好的建议，已经在文章和视频中增加了此内容。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-575">
				<div id="comment-575" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/26449d559fa6174bd72dc74970e29781-75.jpg' srcset='http://2.gravatar.com/avatar/26449d559fa6174bd72dc74970e29781?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://No' rel='external nofollow' class='url'>李小白</a></h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>ONE：<br />
title：什么是WebPack？<br />
content：并将其转换和打包为合适的格式供浏览器使用。<br />
suggest：这句话不严谨，建议修改一下。把合适的格式准确的罗列出来。</p>
<p>TWO：<br />
title：安装WebPack<br />
content：package.json<br />
suggest：建议简略讲一下每一项的意思，代表什么，详细内容自行移步node。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-598">
				<div id="comment-598" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>你的第一个意见，已经修改。第二个会在视频中有所体现。谢谢你的支持。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-576">
				<div id="comment-576" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/3c2001fe4173ff3a847bbb281635d55a-75.jpg' srcset='http://0.gravatar.com/avatar/3c2001fe4173ff3a847bbb281635d55a?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">你的记忆</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>应该提醒下得安装node，不然cmd也没用&#8230;</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-597">
				<div id="comment-597" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>你提的建议非常好，已经修改文章，谢谢你的支持。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-577">
				<div id="comment-577" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/554e21de5d015957db642f33da664009-75.jpg' srcset='http://2.gravatar.com/avatar/554e21de5d015957db642f33da664009?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">zhuozhuo</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>“WebPack在业界的流行成都自然必备多说”流行程度打错啦～然后那个npm安装那里要不要再注明一下用cnpm成功率会高一些呢，我是用npm就不能够安装成功</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-596">
				<div id="comment-596" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢你提出的建议，已经改正。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-578">
				<div id="comment-578" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/104c1db73c90aabde464e9009d3a7bc0-75.jpg' srcset='http://1.gravatar.com/avatar/104c1db73c90aabde464e9009d3a7bc0?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">空格</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>可以加上2.0的版本对比吗，当介绍到3的知识点和2不同的时候，捎带提一下变化，因为很多公司还在用第二个版本</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-595">
				<div id="comment-595" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>在3.0+讲解完，会加入一些2.0的对比。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-579">
				<div id="comment-579" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ab99cbfd52c3eff95e7f525ef2b870bc-75.jpg' srcset='http://1.gravatar.com/avatar/ab99cbfd52c3eff95e7f525ef2b870bc?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">wLlebronc</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，还需解决scss，是不是错了，应该是sass</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-594">
				<div id="comment-594" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>非常感谢指出错误。谢谢你的支持。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-580">
				<div id="comment-580" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/0cf996dfd566b58befa4b762ea1ab08c-75.jpg' srcset='http://0.gravatar.com/avatar/0cf996dfd566b58befa4b762ea1ab08c?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">慕歌</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>希望胖哥出一下 webpack 打包传统多页面的 例子，<br />
现在网上都是 关于webpack用于 vue，react, ag 单页面应用上的例子，<br />
请胖哥有空可以考虑一下，webpack 应用于传统的website开发，提高一下传统模式下的开发效率。<br />
业余时间我自己做了一套webpack2的工作脚手架，目前可以 自动热更新，省了手动刷新页面，sass的编译等，但是感觉还不够完美。<br />
微信群昵称：慕歌</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-593">
				<div id="comment-593" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>你的意见，我会在课程大纲中进行考虑，并酌情进行讲解。感谢你一直一来的支持。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-581">
				<div id="comment-581" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/bda8ed5dfc802eed696df37ad792a6eb-75.jpg' srcset='http://2.gravatar.com/avatar/bda8ed5dfc802eed696df37ad792a6eb?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">夏曦</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>scss就是(sass)，胖哥能不能把安装过程中的依赖什么的截个图，小伙伴直接一路enter可能会和你的最终结果不一样</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-592">
				<div id="comment-592" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>你的建议已经在文章中修改并体现，非常感谢你的建议。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-582">
				<div id="comment-582" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/b23022e2951d33acba758a243c10b13d-75.jpg' srcset='http://2.gravatar.com/avatar/b23022e2951d33acba758a243c10b13d?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">A+韩瑜</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>1.原文中的拼写错误<br />
原文：WebPack在业界的   流行成都    自然必备多说<br />
改：流行程度</p>
<p>原文：这个文件夹就是我们的项目文件目录了，   文件家   建立好后，可以通过下面命令安装WebPack。<br />
改：文件夹</p>
<p>2.第一步是从安装开始，那么是否也介绍一下，本地安装<br />
“不推荐全局安装 webpack。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。”   这是官方文档的原话，那么我们这里是否也提醒一下，或者说解释一下</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-591">
				<div id="comment-591" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>感谢你的指正和建议，文章中已经改正，技术胖为了感谢你支持，赠送价值48元《webpack3.0+视频课程》一套，请微信跟技术胖联系，获取免费观看码。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-583">
				<div id="comment-583" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/b23022e2951d33acba758a243c10b13d-75.jpg' srcset='http://2.gravatar.com/avatar/b23022e2951d33acba758a243c10b13d?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">A+韩瑜</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>安装是很简单的一步，一般错误可能出现在node的版本号，我们可以友好提醒，这也是安装的前提条件</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-584">
				<div id="comment-584" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/85650f0ed1535d05e7d43e66c31040ea-75.jpg' srcset='http://2.gravatar.com/avatar/85650f0ed1535d05e7d43e66c31040ea?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">伊吾鱼</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>文章还是分章节好一点，文章太长滑动有点卡，尤其是嵌入多个视频的时候</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-590">
				<div id="comment-590" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>好的。你的意见非常好，我会慎重考虑。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-585">
				<div id="comment-585" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/6c6e164bd6ce32e18acdf441c88ff439-75.jpg' srcset='http://0.gravatar.com/avatar/6c6e164bd6ce32e18acdf441c88ff439?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">男二号</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥  我拿Mac按照你步骤输入npm install -g webpack就老报这个错<br />
no such file or directory, access &#8216;/usr/local/lib/node_modules/webpack/node_modules/ansi-regex&#8217;<br />
但是转用cnpm就能安装上<br />
求教这个问题</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-589">
				<div id="comment-589" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>两个原因，Mac是需要权限的，所以你加上sudo试一下。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-586">
				<div id="comment-586" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ecbda8c38edf67027cb427b6b56854ad-75.jpg' srcset='http://2.gravatar.com/avatar/ecbda8c38edf67027cb427b6b56854ad?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">安河桥北</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>个人建议：1.webpack的优势，带个前端开发的优势；2.带领大家装好webpack；3.充分讲解安装好的模块的作用；4.讲解一个通用的webpack配置；5.如何定制私有化的webpack；6.webpack的高级用法以及常用插件的安装使用。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-588">
				<div id="comment-588" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月17日</span>
						</div>

						
						<div class="comment-content">
							<p>你的建议非常好，整个课程的大纲会参考你的意见完成。谢谢你一直的支持。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-607">
				<div id="comment-607" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/2b4a5509ee57b51ce210b93da15a6ab1-75.jpg' srcset='http://2.gravatar.com/avatar/2b4a5509ee57b51ce210b93da15a6ab1?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">hawkzz</h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>原文：<br />
dist文件夹：用力存放供浏览器读取的文件，可以理解成webpack打包成的文件。<br />
改成：<br />
dist文件夹：用来存放供浏览器解析的文件，可以理解成webpack打包后的文件。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-618">
				<div id="comment-618" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>感谢你提供的建议，文中已经修改。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-610">
				<div id="comment-610" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/85736e754be62a6133864cabac23e27b-75.jpg' srcset='http://2.gravatar.com/avatar/85736e754be62a6133864cabac23e27b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">落_尘</h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥我看了下刚刚的文章，好像漏了一点，如果电脑之前安装了旧版本的webpack，该如何升级到最新的webpack版本，这个可以附带睡一下，就一行字的事,然后我觉得视屏过程中，胖哥可以说说你是怎么学习webpack的。个人觉得学习方法才是王道。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-614">
				<div id="comment-614" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>非常好的建议，确实有遗漏，已经在文章中增加。<br />
技术胖为感谢你提供的意见，赠送给你价值48元免费观看《webpack3.X 成神之路》视频教程。<br />
请尽快在微信中联系技术胖，获取视频激活码。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-611">
				<div id="comment-611" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ab99cbfd52c3eff95e7f525ef2b870bc-75.jpg' srcset='http://1.gravatar.com/avatar/ab99cbfd52c3eff95e7f525ef2b870bc?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">WLlebronc</h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥！可以讲一下webpack安装，和打包时常见的错误！个人建议</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-615">
				<div id="comment-615" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>非常感谢你的建议，教程中一定会讲解相关的内容，请关注教程。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-612">
				<div id="comment-612" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/1ab51f40e7d920d567945bc55c6e218b-75.jpg' srcset='http://1.gravatar.com/avatar/1ab51f40e7d920d567945bc55c6e218b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">L</h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>原文：{entry file}:路口文件的路径，本文中就是src/entery.js的路径；</p>
<p>“路口文件”？  是指“入口文件”<br />
微信名：L</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-616">
				<div id="comment-616" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢你指出的错误，非常感谢。文中已经修改。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-613">
				<div id="comment-613" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/7c59e1d8a4185ffbf1dc9c38f03974cb-75.jpg' srcset='http://1.gravatar.com/avatar/7c59e1d8a4185ffbf1dc9c38f03974cb?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小灰</h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>原文：学习并作完这节课你就可以和朋友小吹一下<br />
改成：学习并做完这节课的内容<br />
顺便希望胖哥能解释下生成的bundle.js里面的内容</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-617">
				<div id="comment-617" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>非常感谢你提供的错误内容，文中已经修改。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-619">
				<div id="comment-619" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/3c2001fe4173ff3a847bbb281635d55a-75.jpg' srcset='http://0.gravatar.com/avatar/3c2001fe4173ff3a847bbb281635d55a?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">你的记忆</h3>							<span class="comment-date">2017年9月18日</span>
						</div>

						
						<div class="comment-content">
							<p>我觉得可以把，cd /d xxx等一些简单、常用的命令提一下</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-623">
				<div id="comment-623" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/554e21de5d015957db642f33da664009-75.jpg' srcset='http://2.gravatar.com/avatar/554e21de5d015957db642f33da664009?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">杨小毒zhuozhuo</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>1. &#8220;接下来在src文件家下&#8221;:文件夹;<br />
2. entry file直接命名为entry.js会不会更直观一些呢;<br />
3. {entry file}:入口文件的路径，本文中就是src/entery.js的路径；<br />
{destination for bundled file}:填写打包后存放的路径。个人觉得这里不是很清楚，是不是注明相对于哪里的路径，没有看下面的例子的话，可能会想是不是绝对路径还是相对路径，相对路径又是相对哪里，比较迷惑～</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-625">
				<div id="comment-625" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/be81bfbd3ff66188cfa2e01cc17ff640-75.jpg' srcset='http://2.gravatar.com/avatar/be81bfbd3ff66188cfa2e01cc17ff640?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">YT</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，我刚学，暂时不能给你提出啥建议，在这里就提前祝胖哥中秋国庆同乐！</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-626">
				<div id="comment-626" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢你的祝福。让我们一起学习webpack吧。我相信学完后你就能独挡一面了。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-627">
				<div id="comment-627" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/7e2cfc87fdf9404cfaa937671a02c63b-75.jpg' srcset='http://1.gravatar.com/avatar/7e2cfc87fdf9404cfaa937671a02c63b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">barry</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，react和webpack要双线作战吗？（两个一起出，还是先出webpack？）</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-628">
				<div id="comment-628" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f8f8109e2791d7827abf77beed7006b7-75.jpg' srcset='http://0.gravatar.com/avatar/f8f8109e2791d7827abf77beed7006b7?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">老K</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>path.resolve(__dirname,’dist’) 可以解释下 __drname是什么</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-629">
				<div id="comment-629" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f8f8109e2791d7827abf77beed7006b7-75.jpg' srcset='http://0.gravatar.com/avatar/f8f8109e2791d7827abf77beed7006b7?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">老K</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>path.resolve(__dirname,’dist’) 可以解释下 __dirname是什么</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-630">
				<div id="comment-630" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f6266fc77198a003621ee3c94997fea2-75.jpg' srcset='http://0.gravatar.com/avatar/f6266fc77198a003621ee3c94997fea2?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">homefrank</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>[name]的意思是根据入口文件的名称，打包成相同的名称，有几个路口文件，就可以打包出几个文件     。路口文件改为入口文件。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-640">
				<div id="comment-640" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>感谢你的建议，文中已经修改。非常感谢指正。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-631">
				<div id="comment-631" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/3c2001fe4173ff3a847bbb281635d55a-75.jpg' srcset='http://0.gravatar.com/avatar/3c2001fe4173ff3a847bbb281635d55a?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">你的记忆</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>第02节，写的挺好简单易懂，不知道后面会不会讲的更细些，如entry：string | [string] | object { : string | [string] }      output.filename的[hash]、[chunkhash]、[name]、[id]、[query]表示啥使用场合等等（可以给大伙讲讲经验，你踩过的坑）</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-632">
				<div id="comment-632" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/1ab51f40e7d920d567945bc55c6e218b-75.jpg' srcset='http://1.gravatar.com/avatar/1ab51f40e7d920d567945bc55c6e218b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">L</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p>在第01节中创建的“entery.js”，在第02节中入口文件写成了“entry.js”</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-636">
				<div id="comment-636" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/28fce2c3c052413485e6ab81342f4ae9-75.jpg' srcset='http://2.gravatar.com/avatar/28fce2c3c052413485e6ab81342f4ae9?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">言Sir</h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，从第二节开始没有视频了嘛，我刚开始学，能买你全套的 webpack 视频嘛</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-639">
				<div id="comment-639" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>视频还在录制中，不过现在购买时有优惠的。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-643">
				<div id="comment-643" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e7f9a6a6ca04a813a7af6a2dce6537ea-75.jpg' srcset='http://2.gravatar.com/avatar/e7f9a6a6ca04a813a7af6a2dce6537ea?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Jay</h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>我觉得在第二节课后是否需要提一嘴，这样打包的好处，为什么需要这样做，不然新手看到这后，会有疑问，为什么我不直接在index.html里直接引用entry.js，毕竟对于这个例子来说，webpack确实感觉多此一举。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-644">
				<div id="comment-644" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月21日</span>
						</div>

						
						<div class="comment-content">
							<p>非常好的建议，我会进行更正。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-649">
				<div id="comment-649" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/1ab51f40e7d920d567945bc55c6e218b-75.jpg' srcset='http://1.gravatar.com/avatar/1ab51f40e7d920d567945bc55c6e218b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">L</h3>							<span class="comment-date">2017年9月21日</span>
						</div>

						
						<div class="comment-content">
							<p>&#8220;&#8211;save-dev&#8221; 还是 &#8220;-save-dev&#8221;</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-651">
				<div id="comment-651" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月21日</span>
						</div>

						
						<div class="comment-content">
							<p>save前是两个杠。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-652">
				<div id="comment-652" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/2b4a5509ee57b51ce210b93da15a6ab1-75.jpg' srcset='http://2.gravatar.com/avatar/2b4a5509ee57b51ce210b93da15a6ab1?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://blog.hawkzz.com' rel='external nofollow' class='url'>hawkzz</a></h3>							<span class="comment-date">2017年9月22日</span>
						</div>

						
						<div class="comment-content">
							<p>纯金网站前面必需加上www才能访问，你可以叫你朋友改一下</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-653">
				<div id="comment-653" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/2b4a5509ee57b51ce210b93da15a6ab1-75.jpg' srcset='http://2.gravatar.com/avatar/2b4a5509ee57b51ce210b93da15a6ab1?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://blog.hawkzz.com' rel='external nofollow' class='url'>周壮</a></h3>							<span class="comment-date">2017年9月22日</span>
						</div>

						
						<div class="comment-content">
							<p>自己敲代码的时候看见一个问题，3.6安装完模块会生成一个package-lock.json文件，这个是新版本增加的吗？ 以前的版本是没有的，即使有那也是隐藏的，可以在视频中解释一下吗？</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-654">
				<div id="comment-654" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月22日</span>
						</div>

						
						<div class="comment-content">
							<p>package-lock.json是node8.X版本新加的，主要作用是记录node_modules里的树状结构，所以重新下载时会很快，它并不会在生产环境中使用。希望这个答案对你有帮助。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-657">
				<div id="comment-657" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/cefc74be9606011654591f445b467b52-75.jpg' srcset='http://0.gravatar.com/avatar/cefc74be9606011654591f445b467b52?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://0' rel='external nofollow' class='url'>信号</a></h3>							<span class="comment-date">2017年9月23日</span>
						</div>

						
						<div class="comment-content">
							<p>module.rules 里的use 总是报错 ,  怎么换成 loader就可以了</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-660">
				<div id="comment-660" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月25日</span>
						</div>

						
						<div class="comment-content">
							<p>是有几种写法的，我在第6节课中已经重点讲解了。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-658">
				<div id="comment-658" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/c776c5eefc9aac7e007fb1efff010f9c-75.jpg' srcset='http://0.gravatar.com/avatar/c776c5eefc9aac7e007fb1efff010f9c?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">leywis</h3>							<span class="comment-date">2017年9月24日</span>
						</div>

						
						<div class="comment-content">
							<p>宇哥，我按照你步骤写出来，但是热跟新没有用啊</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-659">
				<div id="comment-659" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月25日</span>
						</div>

						
						<div class="comment-content">
							<p>你看的是视频还是文字教程？查看自己的wbpack版本，和node版本。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-662">
				<div id="comment-662" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/8d322139b07c62e9dd3629b72438fa11-75.jpg' srcset='http://2.gravatar.com/avatar/8d322139b07c62e9dd3629b72438fa11?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">拓荒</h3>							<span class="comment-date">2017年9月25日</span>
						</div>

						
						<div class="comment-content">
							<p>刚来您的网站，发现很棒！还有你的域名也很有意思，js胖、技术胖、金三胖，哈哈!</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-666">
				<div id="comment-666" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月26日</span>
						</div>

						
						<div class="comment-content">
							<p>看来你懂我。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-663">
				<div id="comment-663" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/4bf119163803df0c70420a573bf5d02a-75.jpg' srcset='http://1.gravatar.com/avatar/4bf119163803df0c70420a573bf5d02a?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">51echo</h3>							<span class="comment-date">2017年9月26日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，想问你一个问题就是做为 一个开发来说， 如果想系统的学习你博客里面的这些东西，应该以一个什么样的顺序进行，因为觉得现在你授课的这些东西，都很有用。本人也是前端，样样都略懂一点，想系统的跟着你学习，主要是胖哥你讲的简单易懂！付费的课程，我也都购买了，</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-667">
				<div id="comment-667" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月26日</span>
						</div>

						
						<div class="comment-content">
							<p>网站右边有个Vue的学习过程，总体来说是从后往前学就对了。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-665">
				<div id="comment-665" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/7ad718400b08cf6f3fb8226ab2c85059-75.jpg' srcset='http://1.gravatar.com/avatar/7ad718400b08cf6f3fb8226ab2c85059?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">fyj</h3>							<span class="comment-date">2017年9月26日</span>
						</div>

						
						<div class="comment-content">
							<p>我没有在全局安装webpack，直接在项目安装的webpack，为什么显示webpack不是内部命令也不是外部命令，这个是需要在哪里进行配置吗？</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-668">
				<div id="comment-668" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月26日</span>
						</div>

						
						<div class="comment-content">
							<p>没有全局安装时肯定找不到webpack这个命令的。你可以全局安装一下。如果不想全局安装可以在package.json里进行配置。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-675">
				<div id="comment-675" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/9cb42692422a98055cbe3a9db2664118-75.jpg' srcset='http://0.gravatar.com/avatar/9cb42692422a98055cbe3a9db2664118?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">逆时针</h3>							<span class="comment-date">2017年9月27日</span>
						</div>

						
						<div class="comment-content">
							<p>通过使用不同的Loader，Webpack可以的脚本和工具，从而对不同的文件格式进行特定处理。  语言不通顺</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-677">
				<div id="comment-677" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月28日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢你指出的问题，我马上修改。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-679">
				<div id="comment-679" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/dbb53384472c874f05e461e675c685d3-75.jpg' srcset='http://1.gravatar.com/avatar/dbb53384472c874f05e461e675c685d3?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">刘</h3>							<span class="comment-date">2017年9月28日</span>
						</div>

						
						<div class="comment-content">
							<p>看文字一步步来的 npm run server 可以启动 但热更新无效</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-682">
				<div id="comment-682" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月28日</span>
						</div>

						
						<div class="comment-content">
							<p>热更新无效，可以试着去配置一下publicPath=&#8221;/temp&#8221;。</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-680">
				<div id="comment-680" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/3c2306f47df157d5979a2c9c4200b8e0-75.jpg' srcset='http://0.gravatar.com/avatar/3c2306f47df157d5979a2c9c4200b8e0?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">路人甲</h3>							<span class="comment-date">2017年9月28日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，在 第四节中，我下载了 webpack-dev-server,第一次安装没注意，写成了 cnpm install webpack-dev-server -S,后来看您的不一样，就有重新下载了一边cnpm install webpack-dev-server &#8211;save-dev，配置好package.json里的scrips后，还是出现 错误，就是没配置package.json前的错误，怎么办</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-681">
				<div id="comment-681" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月28日</span>
						</div>

						
						<div class="comment-content">
							<p>需要重新作一边。或者自己改package.json,然后删掉node_module文件夹，然后重新npm install.</p>
						</div>

												<span class="comment-reply">
													</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
        </ul><!-- .comment-list -->

        
                <p class="no-comments">Comments are closed.</p>
        
    
    </div>					</div>
				
			
					</div>

		<div class="col-md-4">
    <div class="primary-sidebar widget-area" role="complementary">
        <aside id="aster_about_base_widget-2" class="widget widget_aster_about_base_widget"><h1 class="widget-title text-uppercase">博主介绍</h1>			
			<div class="about-widget">
			
						
						<div class="about-me-content">技术胖：10年一线互联网程序开发经验（仍在一线奋战），做过J2EE、PHP和前端，现在主要关注前端领域。每年帮助50万以上前端爱好者学习。 除一线程序员外，博主还有以下身份，但只在装逼时使用。 掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院知名讲师，百度传课前端讲师。</div>
				
			
			</div>
			
		</aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" action="http://jspang.com/">
    <div class="aster-search-form">
		<input type="text" placeholder="Search and hit enter&hellip;" value="" name="s" id="s" />
	 </div>
</form></aside><aside id="text-2" class="widget widget_text"><h1 class="widget-title text-uppercase">公告</h1>			<div class="textwidget"><div></div>
<div style="color: #f44336; font-weight: blod;">广告事宜请联系：QQ：454275609</p>
<hr />
<p><strong>QQ群1：364140450(满)</strong></p>
</div>
<div style="color: #f44336; font-weight: blod;"><strong>QQ群2：524520566（600人）</strong></div>
<div style="color: #f44336; font-weight: blod;">进群和2000多名前端关注者一起进步，<br />
我每周都会上线解答群内问题。</div>
<hr />
<ul>
<li>《webpack3.x 成神之路》更新完成。</li>
<li>开始更新《React全家桶》教程，每周三节，请小伙伴关注。</li>
<li>在看视频课程中，如果有疑问，可以发邮件给技术胖。邮件地址：web0432@126.com ,技术胖会在下班后给你回复邮件，解决你的问题。</li>
</ul>
</div>
		</aside><aside id="text-6" class="widget widget_text"><h1 class="widget-title text-uppercase">如果文章对您有帮助，请打赏：</h1>			<div class="textwidget"><p>						<style>
				
					#tab_container_1817 {
				overflow:hidden;
				display:block;
				width:100%;
				border:0px solid #ddd;
				margin-bottom:30px;
				}

#tab_container_1817 .tab-content{
		padding:20px;
		border: 1px solid #e6e6e6 !important;
		margin-top: 0px;
		background-color:#ffffff !important;
		color: #000000 !important;
		font-size:16px !important;
		font-family: Open Sans !important;
		
				border: 1px solid #e6e6e6 !important;
		}
#tab_container_1817 .wpsm_nav-tabs {
    border-bottom: 0px solid #ddd;
}
#tab_container_1817 .wpsm_nav-tabs > li.active > a, #tab_container_1817 .wpsm_nav-tabs > li.active > a:hover, #tab_container_1817 .wpsm_nav-tabs > li.active > a:focus {
	color: #000000 !important;
	cursor: default;
	background-color: #ffffff !important;
	border: 1px solid #e6e6e6 !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a {
    margin-right: 0px !important; 
    line-height: 1.42857143 !important;
    border: 1px solid #d50000 !important;
    border-radius: 0px 0px 0 0 !important; 
	background-color: #e80606 !important;
	color: #000000 !important;
	padding: 15px 18px 15px 18px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	text-align:center !important;
	font-family: Open Sans !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:focus {
outline: 0px !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:before {
	display:none !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:after {
	display:none !important ;
}
#tab_container_1817 .wpsm_nav-tabs > li{
padding:0px !important ;
margin:0px;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:hover , #tab_container_1817 .wpsm_nav-tabs > li > a:focus {
    color: #000000 !important;
    background-color: #e80606 !important;
	border: 1px solid #d50000 !important;
	
}
#tab_container_1817 .wpsm_nav-tabs > li > a .fa{

margin-right:5px !important;

margin-left:5px !important;


}

		#tab_container_1817 .wpsm_nav-tabs a{
			background-image: url(style/images/img/style-noise.png);
			background-position: 0 0;
			background-repeat: repeat-x;
			}
			


#tab_container_1817 .wpsm_nav-tabs > li {
    float: left;
    margin-bottom: -1px !important;
	margin-right:0px !important; 
}


#tab_container_1817 .tab-content{
overflow:hidden !important;
}


@media (min-width: 769px) {

	#tab_container_1817 .wpsm_nav-tabs > li{
	float:left !important ;
		margin-right:-1px !important;
			}
	#tab_container_1817 .wpsm_nav-tabs{
	float:none !important;
	margin:0px !important;
	}

	/* Margin CSS FOR Horizontal */
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}

}



@media (max-width: 768px) {
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}
}


.wpsm_nav-tabs li:before{
display:none !important;
}

@media (max-width: 768px) {
		
		.wpsm_nav-tabs{
		margin-left:0px !important;
		margin-right:0px !important; 
		
	}
		#tab_container_1817 .wpsm_nav-tabs > li{
		float:none !important;
	}
		
	
}
				</style>
				<div id="tab_container_1817" >
	 
					<ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_1817">
							
							<li role="presentation"  class="active"  >
								<a href="#tabs_desc_1817_1" aria-controls="tabs_desc_1817_1" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏5元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_2" aria-controls="tabs_desc_1817_2" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏15元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_3" aria-controls="tabs_desc_1817_3" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏29元</span>
											
																						
																				
										
									
								</a>
							</li>
											 </ul>

					  <!-- Tab panes -->
					  <div class="tab-content" id="tab-content_1817">
												 <div role="tabpanel" class="tab-pane  in active " id="tabs_desc_1817_1">
								<img src="style/images/weixin05.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_2">
								<img src="style/images/weixin15.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_3">
								<img src="style/images/weixin29.jpg" width="100%" " class="alignnone size-medium" />						 </div>
							
					 </div>
					 
				 </div>
 <script>
		jQuery(function () {
			jQuery('#myTab_1817 a:first').tab('show')
		});
		
				jQuery(function(){
			var b="fadeIn";
			var c;
			var a;
			d(jQuery("#myTab_1817 a"),jQuery("#tab-content_1817"));function d(e,f,g){
				e.click(function(i){
					i.preventDefault();
					jQuery(this).tab("show");
					var h=jQuery(this).data("easein");
					if(c){c.removeClass(a);}
					if(h){f.find("div.active").addClass("animated "+h);a=h;}
					else{if(g){f.find("div.active").addClass("animated "+g);a=g;}else{f.find("div.active").addClass("animated "+b);a=b;}}c=f.find("div.active");
				});
			}
		});
			</script>
				
			<br />
<span style="color: red;">打赏后你将获得以下特权：</span></p>
<p>1.加入技术胖前端微信交流群。<br />
2.收听《前端成神软技能》语音分享版。<br />
3.和10年程序老司机（技术胖）成为微信好友。<br />
4.获得本站前端视频离线高清版。</p>
<hr />
<p><span style="color: red;">打赏后获得特权流程：</span><br />
1.扫二维码添加技术胖私人微信。<br />
<img src="style/images/232323121111111111.jpg" width="50%" /></p>
<p>2.添加微信成功后，发送打赏截图。</p>
<p>3.技术胖拉你入群，查看群公告。</p>
</div>
		</aside><aside id="text-8" class="widget widget_text"><h1 class="widget-title text-uppercase">视频教程</h1>			<div class="textwidget"><p>最新视频</p>
<ol>
<li><a href="http://jspang.com/2017/06/03/es6/" rel="bookmark">技术胖带你玩转ES6视频教程</a></li>
</ol>
<p>Vue视频合集-<small>可按此顺序学习</small></p>
<ol>
<li><a href="http://jspang.com/2017/02/23/vue2_01/" rel="bookmark">【第一季】VUE2.0内部指令(共8集)</a></li>
<li><a href="http://jspang.com/2017/03/14/vue2_02/" rel="bookmark">【第二季】VUE2.0全局API(共9集)</a></li>
<li><a href="http://jspang.com/2017/03/26/vue3/" rel="bookmark">【第三季】VUE2.0选项（共6集）</a></li>
<li><a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0实例内置组件（共4集）</a></li>
<li><a href="http://jspang.com/2017/04/10/vue-cli/" rel="bookmark">技术胖的VUE-CLI 视频教程</a></li>
<li><a href="http://jspang.com/2017/04/13/vue-router/" rel="bookmark">技术胖的VUE-ROUTER视频教程</a></li>
<li><a href="http://jspang.com/2017/05/03/vuex/" rel="bookmark">技术胖的VUEX视频教程</a></li>
<li><a href="http://jspang.com/2017/05/22/vuedemo/" rel="bookmark">VUE实战视频-快餐店收银系统</a></li>
</ol>
<hr />
<p>CocosCreator视频（前端游戏制作）</p>
<ol>
<li><a href="http://jspang.com/category/learn/jichu/">CC基础视频教程</a></li>
<li><a href="http://jspang.com/category/learn/shizhan/">CC实战-勇闯地下室</a></li>
</ol>
<hr />
<p>其它视频</p>
<ol>
<li><a href="http://jspang.com/2016/11/24/webpack/">Webpack基础视频</a></li>
<li><a href="http://jspang.com/2017/01/11/fabricjsbasic/" rel="bookmark">步入FABRIC.JS 中文视频教程</a></li>
</ol>
</div>
		</aside><aside id="text-5" class="widget widget_text"><h1 class="widget-title text-uppercase">捐赠墙</h1>			<div class="textwidget">
<hr/>
<div>以下人员在服务器购买费用中捐款，所以本站由以下人员共同建立。2017年5月22日重新上线。</div>
<div style="color:#f44336;border-bottom:1px solid #e0e0e0;padding:10px 0px;" >土豪榜</div>
<div>
高丽-59元，
周老六-147元，
风飞沙-118元
</div>
<div  style="color:#f44336;border-bottom:1px solid #e0e0e0;;padding:10px 0px;">真情铁粉</div>
<div>
婷婷-19元，
fillter-29元，
军哥哥-29元，
贪吃鱼儿-29元，
妖妖-29元，
追风-48元，
吴思超-29元，
金秀学-29元，
十月弓虽-29元，
谭兵-29元，
千夜一夕-29元，
jason-29元，
上帝没给答案-19元，
土豆-19元，
Tempest-29元，
馥镬-29，
詹小云-19元，
hasaki-29元，
落_尘-29元，
汪胜强-29元，
ginway-29元，
吕檀溪-29元，
Arical-29元，
lishalom-29元，
桂玉青-19元，
张杨-19元，
Peach-29元，
国豪-19元，
Kevin-29元，
孟凡兴-29元，
谢启鸿-19元，
bwhite-29元，
null-29元，
yuyi_guo-19元，
张易得-29元，
Rewa-Fang-29元，
小钟-29元，
木白-29元，
jackyrong-19元，
咚咚-29元，
笑容-29元，
vanjon-29元，
一曲琴殇-19元，
橙橙同学-29元，
王畅-19元，
咚咚-29元，
野蛮的橘子-29元，
路道老粗-29元，
建豪-29元

</div>
</div>
		</aside>    </div>
</div>

	</div>
</div>

<footer id="footer">
	<div class="copy-right-text text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyright &copy; 2017 <a href="http://jspang.com/" rel="home">技术胖-胜洪宇关注web前端技术</a>. All rights reserved.<br>Powered by <a href="http://jspang.com">jspang.com</a>.备案号 <a href="http://icp.chinaz.com/info?q=jspang.com">吉ICP备11005377号-3</a></p>
				</div>
			</div>
		</div>
	</div><!-- /Copyright Text -->
</footer><!-- /#Footer -->


<div class="scroll-up">
    <a href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll Up -->

<link rel='stylesheet' id='wechat-reward-css'  href='style/css/wechat-reward.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"2281"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/smoothscroll.js'></script>
<script type='text/javascript' src='style/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='style/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='style/js/imagesloaded.min.js'></script>
<script type='text/javascript' src='style/js/masonry.min.js'></script>
<script type='text/javascript' src='style/js/jquery.masonry.min.js'></script>
<script type='text/javascript' src='style/js/scripts.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
<script type='text/javascript' src='style/js/wechat-reward.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    
</body>
</html>

<!-- Dynamic page generated in 31.608 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-10-30 18:05:20 -->

<!-- Compression = gzip -->